DataTable decorated with Bootstrap on inactive Tab Has Narrow Header

Question

I am using DataTables with Bootstrap and got it all working. Then I needed a table in a tab and when I do this the table header starts narrow, just fitting to the width of the header text. If the tab is active when the page is shown, the table looks great. You can see an example of what I mean. Tab 1 looks fine. Tab 2 has the narrow header.

If I enable sorting and click a column on Tab 2 the header expands to the appropriate width, but always starts narrow.

Answer 1

It looks like your header columns are initialized with width: 0px. I assume because they aren't rendered (Tab 2 has display: none).

If you include the bootstrap.js library you could try initializing your DataTable on tab switching:

$('a[data-toggle="tab"]').on('shown', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
   $('#table-b').dataTable({ ... });
});

Answer 2

What I found that happens to work is the Following:

$('a[data-toggle="tab"]').on('shown', function (e) {
e.target // activated tab 
e.relatedTarget // previous tab 
var table = $.fn.dataTable.fnTables(true);
 if ( table.length > 0 ) {
 $(table).dataTable().fnAdjustColumnSizing();
 }
});

I was really racking my brain on this one, however since it only checks once if the table has been initialized after the Bootstrap Tab has been clicked, you shouldn't be pestered with the DataTable reinitialization Alert.

I'm not certain if this will work with BootStrap 1, however, I do know it works with BootStrap 2.

Answer 3

In bootstrap 3.x you can use this code:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    e.target // activated tab 
    e.relatedTarget // previous tab 
    var table = $.fn.dataTable.fnTables(true);
    if (table.length > 0) {
        $(table).dataTable().fnAdjustColumnSizing();
    }
});

More info at: http://getbootstrap.com/javascript/#tabs