javascript - Issue with Responsive DataTables And Bootstrap Tabs -

i want use datatables , responsive extension inside bootstrap tabs. have 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 issue here

cause

there multiple issues code:

1. bootstrap library included before jquery library
2. api method responsive.recalc() available in datatables.responsive.js since 1.0.1, you're including version 1.0.0.
3. event handler should attached once dom available.

solution

1. include bootstrap library after jquery library

2. include responsive extension version 1.0.1 or later

3. use 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 code , demonstration.

links

see jquery datatables – column width issues bootstrap tabs solution common problems jquery datatables , bootstrap tabs.