horizontal scroll not working in jquery datatable plugin - datatables

Question

horizontal scroll in datatable.net not aligning headers with actual column data on scrolling.
On scrolling table body gets moved but headers doesn't. I want to set headers scrollable.
My Code sample ::--------
$('#abc').dataTable({
"aaData": userContactGridData,
"bAutoWidth":false,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": ["icon", "adminRoleIcon", "gearIcon"] },// disable sorting on first and last column
{ "sWidth": "20px", "aTargets": ["icon", "gearIcon"] },
{ "sWidth": "200px", "aTargets": ["userName"] },
{ "sClass": "icon", "aTargets": ["icon"] },
{ "sClass": "gearIcon", "aTargets": ["gearIcon"] },
{ "sClass": "userName", "aTargets": ["userName"] },
{ "sClass": "adminRoleIcon", "aTargets": ["adminRoleIcon"] },
{ "bVisible": false, "aTargets": ["adminRoleIcon"] },
],
"sDom": 'C<"H"Tfr>t<"F"ip>',
"iDisplayLength": 6,
"bProcessing": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [[2, "asc"]], // sort by name by default
"sScrollX": "100%",
"bScrollCollapse": true
});

Answer 1

Try adding sScrollX: 100% and bScrollCollapse: true
Then your code look like as below
var oTable;
$(document).ready(function () {
oTable = $("#yourElementName").dataTable({
"sScrollX": "100%",
"bScrollCollapse": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumnDefs": [{ "aTargets": [0], "bSortable": true },
{ "aTargets": ['_all'], "bSortable": false}],
"aaSorting": [[0, 'asc']]
});
setTimeout(function () {
oTable.fnAdjustColumnSizing();
}, 10);
});