Datatable Headers not aligned with columns on load until sorted or clicked on pagination buttons...

Deependra

Hi,

I am using server side processing for my Datatable. Here is the partial code for initialization:

var Table = $('#divxyz').DataTable({
dom: "<'row'<'col-sm-6'l><'col-sm-6'B>>" + "<'row'<'col-sm-12'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-5'i><'col-sm-7'p>>",
lengthMenu: [10, 25, 50],
iDisplayLength: 10,
order: [1, 'asc'],
responsive: true,
scrollX: true,
processing: true,
serverSide: true,
destroy: true,
cache: false,
.
.
.

The width has been set to 100% in the table css.
I have tried Table.columns.adjust().draw(), Table.clear().draw() and some css hacks for 'dataTables_scrollHeadInner' and 'dataTables_scrollHead' as mentioned in some posts but neither of them have worked.
Please not that it only happens when the data is loaded for the first time. The width of the table changes when I click pagination button or even F12 to bring up the dev tool console and looks as expected.
Any help will be appreciated.

Thanks,
Deependra

gyrocode

Try using scroller.measure() method.

See Scroller extension – Incorrect column widths or missing data for code and demonstration.

---

See more articles about jQuery DataTables on gyrocode.com.

allan

Failing that, could you link to a page showing the issue please?

Thanks,
Allan