CODEWITHSUNDEEP
jqueryjquery-uidatatablesjquery-tabs
user1096865
user1096865

Reputation: 245

Cannot get Datatables and Jquery Tabs to display correctly

there is a working example on the datatables website here: http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html

BUT, i believe the example is using jquery-ui 1.8 something and this example no long work for the newer versions of jquery-ui. Specifically this code:

"show": function(event, ui) {
  var table = $.fn.dataTable.fnTables(true);
  if ( table.length > 0 ) {
    $(table).dataTable().fnAdjustColumnSizing();
  }
}

i believe the "show" event is deprecated: http://jqueryui.com/upgrade-guide/1.9/#deprecated-show-event-renamed-to-activate

i tried replacing "show" with "activate", but it doesn't seem to work. Has anyone else has this problem? i can't figure out how to make it work.

Upvotes: 3

Views: 8774

Answers (3)

Asif Raza
Asif Raza

Reputation: 1021

myTab3 is id of tab

  $('#myTab3 a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            // FYP-table is id of datatable
            $('#FYP-table').dataTable().fnAdjustColumnSizing();

        });

Upvotes: 0

Helmut Steiner
Helmut Steiner

Reputation: 41

I just posted a working solution to this problem in another thread. Works on multiple tables in multiple tabs. Here is the code:

$(function () {

// INIT TABS WITH DATATABLES
$("#TabsId").tabs({
activate: function (event, ui) {
    var oTable = $('div.dataTables_scrollBody>table:visible', ui.panel).dataTable();
    if (oTable.length > 0) {
        oTable.fnAdjustColumnSizing();
    }
}
});

// INIT DATATABLES
// options for datatables
var optDataTables = {
"sScrollY": "200px",
"bScrollCollapse": true,
"bPaginate": false,
"bJQueryUI": true,
"aoColumnDefs": [
    { "sWidth": "10%", "aTargets": [-1] }
]
};
// initialize data table
$('table').dataTable(optDataTables);

});

Upvotes: 1

Iurii.K
Iurii.K

Reputation: 2729

Here is a working example which uses activate and the latest versions of jQuery and jQuery UI http://jsfiddle.net/5AavQ/3/ . Check External Resources to see what files were included. Make sure to include all external .js (jQuery, jQuery UI, DataTables) and .css (jQuery UI, DataTables Demo is optional) files.

Upvotes: 2

Related Questions