troubles with responsive extension in bootstrap3 (in tabs)

yureckey

I have a troubles running datatables with responsive extension on a bootstrap3.
It works good in simple container, but when I'm using it in a table in a Tab - it's just doesn't work.
See jsfiddle example with two identical settings for two tables. One is working (upper in simple container) and the other is not (lower, in tab): http://jsfiddle.net/2nrkhcup/1

pradeepshankar

try,

       $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            $('#mytable2').DataTable().destroy();
        $('#mytable2').DataTable({responsive:true}).draw();
    }); 

Fiddle here: http://jsfiddle.net/2nrkhcup/3/

yureckey

Thanks a lot, it works! So, script should create datatable only when tab is activated, not just at startup, got it, did I missed the documentation/sample with info about that or this is just trial-and-error knowledge?

pradeepshankar

Documentation is here: http://datatables.net/reference/api/destroy()

pradeepshankar

Documentation is here: http://datatables.net/reference/api/destroy()

yureckey

Well, turns out some fine-tuning is needed:

$(document).ready(function() {
    $('#mytable3').DataTable({responsive:true});

    var orderTable = undefined;
      $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
          if (e['currentTarget']['text'] == 'table'){
                    if (!orderTable) orderTable = $('#mytable2').DataTable({"responsive":true});

          }
    }); 
} );

http://jsfiddle.net/2nrkhcup/4/

in previous code responsive table was "added" every time user changed tab