Datatable (with VScroll) header is misaligned when it is hidden at first and then made visible.

tikabom

I have created a table inside a div which is initially hidden.
I make it visible on a button click.

JS:

var table = $('#studentTable').DataTable({
'scrollY': '300px',
'scrollCollapse': true,
'columns' : [{'orderData' : [5, 'asc']}, {'orderData' : [4, 'asc']}]
});

When I make the table visible, the headers are not aligned with the body of the table. I think it is because the column header widths are not properly calculated because the table was hidden. If I switch to a different page of the table or filter data in the table, the table headers fix themselves.

Is there any Datatable method that I can explicitly call to fix the headers while making the table visible? Like refresh or redraw the table? I tried table.draw(), but it did not have any effect. I am using Datatable 1.10.1.

Here's a screen shot of the issue: https://www.dropbox.com/s/z7v938hlesimm92/header-issue.JPG

tikabom

Fixed it! Went through the Datatables API more thoroughly. Referred to this link : https://datatables.net/reference/api/columns.adjust()

columns.adjust().draw() needs to be called on the button click that makes the table visible. I had the same problem in a few Colorbox instances and I fixed that by writing the same code in the Colorbox's 'onComplete' event callback.

Make sure you use columns.adjust().draw() at the right places and you can kick header misalignment away.