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

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

tikabomtikabom Posts: 3Questions: 1Answers: 0

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

Answers

  • tikabomtikabom Posts: 3Questions: 1Answers: 0
    edited August 2014

    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.

This discussion has been closed.