I have a problem that is recurrent with this plugin.
When scrollX option is enabled, the header columns are misaligned. I tried many solutions read on stackoverflow, but I didn't have success.
Maybe, is it a problem of the plugin version?
However, this are my dataTable settings:
var oTable = $('#table').dataTable({
"bJQueryUI": true,
"aaData": jsonList,
"bPaginate": true,
"scrollX": true,
"scrollCollapse" : true,
"bLengthChange" : true,
"bAutoWidth" : true,
"oLanguage" : IT,
"aoColumns": [
{ "mDataProp": "name", "sClass": "alignCenter" },
{ "mDataProp": "surname", "sClass": "alignCenter" },
{ "mDataProp": "age", "sClass": "alignCenter" },
{ "mDataProp": "city", "sClass": "alignCenter" },
{ "mDataProp": "state", "sClass": "alignCenter" },
{ "mDataProp": "work", "sClass": "alignCenter" },
],
"aaSorting": [[1, 'asc']],
"fnDrawCallback": function () {
formatTable();
}
Style of my table:
class="display" cellspacing="0" width="100%"
Version of libraries:
jquery-1.11.1.min.js - DataTables 1.10.3
When scrolling is enabled in DataTables using scrollX or scrollY parameters, it will split the entire table into two or three individual HTML table elements; the header, the body and, optionally, the footer. This is done in order to provide the ability to scroll the different sections of the DataTable in a cross-browser manner.
Below code wrap a div around the DataTable with style “overflow as auto”. We need to add div when dataTable completed the execution. We can do this as below:
$('#DataTableID').DataTable({
//"scrollX": true,
"initComplete": function (settings, json) {
$("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
},
});
If you are using the scrollX,scrollY, scrollXInner or sScrollXInner options – remove them. They may cause probles.
Source : http://sforsuresh.in/datatables-header-body-not-aligned/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With