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( {
        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

回答1:

CAUSE

There are multiple issues with your code:

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

SOLUTION

Include Bootstrap library after jQuery library
Include Responsive extension version 1.0.1 or later

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.

回答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.

来源：https://stackoverflow.com/questions/32690478/issue-with-responsive-datatables-and-bootstrap-tabs

标签

javascript

twitter-bootstrap

tabs

datatables