Multiple DataTables on a page, and calling API columns.adjust() doesn't align header/body columns

tom_supergan

Description of problem:
I call DTApi.columns.adjust(), but it doesn't seem to have any affect.

var DTApi = $(".dataTable").DataTable({initialization code...});

When showing a hidden table, call adjust after it is shown:
DTApi.columns.adjust().draw();

There are many DataTables on one page, initialized by the same class="dataTable". The tables are hidden by default, so when the user clicks on a header to show a table, the table's header doesn't align with the table body, the column widths are different. This is well documented on the columns.adjust() page. When a table is hidden, the columns can't be properly sized. For some reason, the first table is properly aligned, but none of the following tables are.

I tried calling DTApi.columns.adjust().draw(), but I don't see any changes. All other functions work fine (column order, search, etc. Resizing the browsers triggers an event that does fix the shown tables, but opening up hidden tables, they are still mis-aligned.

What am I doing wrong? I breakpoint the JavaScript and step through the code, watching the table open, then calling adjust(). Even some tables that are already open when opening a new one still aren't adjusted.

Do I have to call adjust() on just one table at a time? I guess I would have to assign a unique ID attribute to each table when built, so they can be referenced individually when calling adjust().

https://datatables.net/reference/api/columns.adjust()
https://datatables.net/manual/api#Multiple-tables

kthorngren

Can you provide a link to your page or a test case showing the issue so we can take a look and help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

tom_supergan

Thank you for replying.

I worked on that problem all day. Turns out it was a CCS rule I overlooked. It had the table display: none when the tables were initialized. Removing that rule, building the DataTables on the page, then collapsing them all solved the problem.

I kept looking at and tracing the JavaScript when it was a CSS rule added by someone else.

Sorry for bothering anyone, problem solved.

allan

Thanks for the update.

If you initialise the table while it is hidden then it has no height or width for the column alignment calculations (needed when scrolling is enabled). The way to resolve that is to call columns.adjust() when you make the table visible.

Or just initialise it visible as you have done

Allan