Issue with Responsive DataTables And Bootstrap Tabs

Question

I want to use Datatables and Responsive extension inside Bootstrap Tabs. I have this working separately.

$(document).ready(function() {
    $('#example').DataTable( {
        responsive: true
    } );
    $('#exampleInTab').DataTable( {
        responsive: true
    } );
} );

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

You can see the issue here

Answer 1

CAUSE

There are multiple issues with your code:

1. Bootstrap library is included before jQuery library
2. API method responsive.recalc() is available in dataTables.responsive.js since 1.0.1, you're including version 1.0.0.
3. Event handler should be attached once DOM is available.

SOLUTION

1. Include Bootstrap library after jQuery library

2. Include Responsive extension version 1.0.1 or later

3. Use the code below:

   $(document).ready(function () {
       $('#example').DataTable({
           responsive: true
       });
   
       $('#exampleInTab').DataTable({
           responsive: true
       });
   
       $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
           $($.fn.dataTable.tables(true)).DataTable()
              .columns.adjust()
              .responsive.recalc();
       });    
   });
   

DEMO

See updated jsFiddle for code and demonstration.

LINKS

See jQuery DataTables – Column width issues with Bootstrap tabs for solution to the most common problems with jQuery DataTables and Bootstrap Tabs.