Responsive Issues With Multiple DataTables And Bootstrap Tabs

Question

I have 2 bootstrap wells and each well contains a pair of tabs. Each tab contains a DataTable (there are 4 in total). When I load the page the first two DataTables work perfectly as expected. When I switch tabs the tables that are rendered always include 1 column (regardless to the column size) and the remainder are part of the child row. I've tried just about everything to get the table to draw correctly. If anyone has any suggestions please let me know. Also I'm somewhat new to web UI code so if there are any glaring mistakes please bear with me.

I have created an example that mimics what I am coding and shows the behavior I'm experiencing. It can be found here: http://live.datatables.net/sozobucu/edit

Answer 1

The responsive plugin can't determine the column requirements for tables that are hidden. So after the table is shown (tab changed) the following needs to be called to recalculate the columns:

$($.fn.dataTable.tables(true)).DataTable().columns.adjust().responsive.recalc();

These calls were not functioning correctly in DataTables 10.7 but have been fixed in the most recent nightly build. In the short term we will use the nightly build until this fix makes it into an official release. Hope this helps someone if they experience the same issue.

The discussion can be followed here.