Responsive Issues with multiple tables and bootstrap tabs.

devwindyvalley

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/4

My debugger code is: enocid

allan

When I switch tabs the tables that are rendered always include 1 column (regardless to the column size)

Take a look at this example which explains why there is that issue (annoyingly that example doesn't actually show the tabs at the moment, but the description and code to adjust for the tabs are correct!). The example is for jQuery UI - you'll need to listen for the Bootstrap tab events of course since you are using Bootstrap.

Allan

devwindyvalley

Hi Allen,

So after the bootstrap tab is shown I make the call to adjust the columns as the example shows:

        $("a[data-toggle=\"tab\"]").on("shown.bs.tab", function (e) {
            $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
        });

Unfortunately I still see the same behavior. I updated the example found here http://live.datatables.net/sozobucu/9/edit to reflect this change

allan

Oops - sorry. Two issues:

1. We need to call responsive.recalc() as well so Responsive also knows about the change!
2. There is a bug in DataTables 1.10.7 when calculating column widths with hidden columns. This is fixed in the nightly version (available on the downloads page).

Updated example: http://live.datatables.net/sozobucu/11/edit .

Allan

devwindyvalley

Thank you Allen! You have no idea how much your support is appreciated!!!