Responsible issues with multiple data tables and bootstrap tabs
I have 2 bootstrap wells and each well contains a couple of tabs. Each tab contains a DataTable (4 in total). When I load the page, the first two DataTables are working fine as expected. When I switch tabs, the displayed tables always include 1 column (regardless of the column size) and the rest are part of the child row. I have tried everything to draw the table correctly. If anyone has any suggestions please let me know. Also, I am somewhat new to the web UI, so if there are any glaring bugs please bear with me.
I have created an example that simulates coding and shows the behavior that I am experiencing. It can be found here: http://live.datatables.net/sozobucu/edit
source to share
The plugin in charge cannot determine the column requirements for hidden tables. Therefore, after displaying the table (the tab is changed), you must call to recalculate the columns:
$($.fn.dataTable.tables(true)).DataTable().columns.adjust().responsive.recalc();
These calls did not function correctly in DataTables 10.7, but were fixed in the most recent nightly build. For the short term, we'll be using a nightly build until this fix becomes an official release. Hope this helps someone if they run into the same problem.
You can discuss it here .
source to share