We Keep Coding

Datatable Fixed Column (Right Only) Issue

I'm using JQuery Datatable and I ran into a problem when I used fixed column.
It has been showing two times my fixed column
I'm using serverside processing and that's my code:
dataTable = table.dataTable({
fixedColumns: {
leftColumns: 0,
rightColumns: 1
},
scrollX:true,
scrollCollapse: true,
"fnDrawCallback":function(oSettings) {
$('div.choosePage select').val(dataTable.DataTable().page());
},
"pagingType":"bootstrap_full_number",
"processing": true,
"serverSide": true,
"ajax": {
"data":GETDATA,
"dataSrc":SETAJAXDATA
},
"fnInitComplete":completeProcess,
"colReorder": true,
"order": [
[0, 'asc']
],
"dom": "<'row' <'col-md-12'>><'row'<'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-4 col-sm-12'i><'col-md-5 col-sm-12 toolbar'p><'col-md-push-1 col-md-3 col-sm-12 toolbar choosePage'>>", // horizobtal scrollable datatable
})
Ajax is working good and there is no problem when I used fixed column on left side,but when I used it on right side i'm running into this problem.
Thanks.

I believe it is a bug in Jquery Datatable if you haven't setup scrollY from the options, make sure you set some value.
Because when you inspect the element you can see scroll-y overflow is auto. If you set it as hidden or not setup a value from the options, there you go, you see the space at the right side.
Incase you do not want to use scroll-y at all, then you need to make your hands dirty with some css code by giving some minor margin which is an ugly solution. But I cannot see any other option for you.
It's a shame for Jquery datatable plugin.
Below shows an example option list from the plugin website.
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns: 0,
rightColumns: 1
}
} );
} );

Strange DataTable sorting and keydown behaviour

I've recently added the 'KeyTable' extension to datatable, to navigate through my table with the arrowkeys.
First, I added the following code to get the first record of my table selected:
gruposDispTab.cell(':eq(0)').focus();
But I get the last record selected:
Then, with the KeyTable function added, the up arrow key selects the lower row, and the down arrow key selects the upper row; even with that, the inner scroll of my table works fine (up arrow key - scroll goes up, down arrow key, scroll goes down).
I don't know what datatable configuration I need to change to fix this.
P.D.: In case this is needed, this is how I initialized my datatable:
gruposDispTab = $('#gruposSelect').DataTable({
//deferRender: true,
scrollY: 215,
scrollX: false,
scrollCollapse: true,
scroller: true,
dom: 't',
sScrollInner: 702,
bPaginate: false,
info: false,
"destroy": true,
"keys": true,
searching: true,
//orderCellsTop: true,
"language": {
"search": "Buscar: ",
"zeroRecords": "No se encontraron coincidencias",
"info": "Mostrando página _PAGE_ de _PAGES_"
}
});

Try disabled the ordering in your DataTable.
$('#example').dataTable( {
"ordering": false
} );
source: https://datatables.net/reference/option/ordering

Jquery datatable creating extra header on chrome browser when using scrollX property

('#instant-quotes').DataTable({
"data": dataSet,
"scrollY": yscroll,
/*"initComplete": function(settings, json) {
$('#instant-quotes thead tr:first').remove();
},*/
"dom": "lfrti",
"scrollCollapse": false,
"bSortCellsTop": false,
"info": false,
"processing": true,
"bLengthChange": false,
"searching": false,
"pageLength": 7,
"order": [ 0, "desc" ]...
})
When i use the datatable with the scrollX property it always append a blank <thead> with a <tr>.I dont why this occurs but its always doing this,however i removed by using jquery
$('#instant-quotes thead tr:first').remove()
But i dont think so its a good solution because when i sort or redraw the table then this blank <thead> again appears, also when i change the layout (coz its responsive) then it appears again,
Kindly suggest a better and optimal solution.

Specify page size in jquery datatable server side pagination

I have a datatable which uses server side pagination with infinite scroll. So my pages loads as an when I scroll down the table. Now the default page size is 10. How can I override this number?
I tried setting iDisplayLength:50, but didnt work.
ListDataTable= $("#ListDataPane_data").dataTable({
"iDisplayLength":50,
"bFilter": true,
"bServerSide": true,
"sServerMethod": "POST",
"sAjaxSource": ListResourcePaginationUrl,
"bProcessing": true,
"sPaginationType": "full_numbers",
"bJQueryUI": false,
"bDestroy": true,
"bScrollInfinite": true,
"sScrollY": "300px",
"sScrollX": "963px",
"fnServerParams": function (aaData) {
aaData.push(
{ "name": "Status", "value": status}
);
});
},
Please help.

It may be that the server doesn't respect the iDisplayLength value. In this case you must also update the server side.

"iDisplayLength":50 works, I just had to clear the browser cache.

you should call fnDraw method in DataTable after change iDisplayLength field value:
table.fnSettings().iDisplayLength = 20;
and
table.fnDraw();

Column chooser not shown up on the page for jquery datatable

I am trying to use the datatable column chooser as shown in Datatable Colvis as shown below
$('#tableId').dataTable({
"sDom": 'C<"clear">lfrtip',
"oColVis": {
"aiExclude": [ 0,15 ]
},
"aaSorting": [],
"aaData":[],
"aoColumns": [],
"bScrollInfinite": true,
"sScrollY": "280px",
"sScrollX": "963px",
"bDestroy":true,
"iDisplayLength" : 10,
"fnInitComplete": function() {
// custom scroll bars
//$('#tableId').find('.dataTables_scrollBody').jScrollPane();
},
});
I have added 16 columns which I cant show up in the code here.
But the column chooser doesn't show up on the UI. Any mistake am doing here?

Sorry I had not added ColVis plugin JS to application, so it was not working. Thanks for your response.