Question

11

Issue with Responsive DataTables And Bootstrap Tabs

rated 0 times [ 16] [ 5] / answers: 1 / hits: 20615 / 9 Years ago, mon, september 21, 2015, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alenaautump

Add To Favorites

Follow

Total Points: 87

Total Questions: 109

Total Answers: 109

Location: Libya

Member since Mon, Dec 7, 2020

4 Years ago

answered 9 Years ago tyriquehenryq · Accepted Answer

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.