Issue With Responsive DataTables And Bootstrap Tabs

I want to use Datatables and Responsive extension inside Bootstrap Tabs. I have this working separately. $(document).ready(function() { $('#example').DataTable( { respo

Solution 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.

Solution 2:

I tried the answers above but none worked. I was using JQuery Steps Wizard as tabs. I had to use $('#datatable').css("width", '100%') as well for it to work.

wizard.steps({
            headerTag: "h3",
            bodyTag: "section",
            transitionEffect: "slideLeft",
            enableFinishButton: false,
            enablePagination: false,
            enableAllSteps: true,
            titleTemplate: "#title#",
            cssClass: "tabcontrol",
            onStepChanged: function (event, currentIndex, priorIndex) {

                if (currentIndex == 2) {
                    $('#datatable').css("width", '100%')
                    $($.fn.dataTable.tables(true)).DataTable().columns.adjust().responsive.recalc();
                }
            }
        })

My Datatable is on the 3rd tab hence the check on the currentIndex.