I have one table with 50 columns and showing about 50000 records. When clicking on a certain bootstrap tab I want to make different columns visible.
The below works ... but it always takes 2 or 3 seconds to adjust the columns when clicking on the tab. Is there another way to speed this up?
table_all = $('#table-all').DataTable( {
dom: "Blrtip",
ajax: {
url: "/source.php",
type: "POST",
data: function (d) {
...
} },
serverSide: true,
processing: true,
columns: [
/* 50 columns */
order: [[ 0, 'asc' ]]
lengthMenu: [25, 50, 100, 250]
} );
$("#tableTabs a[data-toggle=\"tab\"]").on("shown.bs.tab", function (e) {
var newTab = $(e.target).attr('aria-controls');
selectedTab = newTab;
if ( selectedTab == 'firsttab') {
table_all.columns( [ 2,3,4,5,6,7,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46 ] ).visible( false );
table_all.columns( [ 0,1,8,9,10,11,12,13,14,15,16,17 ] ).visible( true );
}
if ( selectedTab == 'secondtab') {
table_all.columns( [ 2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46 ] ).visible( false );
table_all.columns( [ 0,1,18,19,20,21,22,23,24 ] ).visible( true );
}
});