响应式DataTables和Bootstrap选项卡的问题

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.

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