(Workaround) Showng/Hiding many columns at once is slow!
(Workaround) Showng/Hiding many columns at once is slow!
dbuezas
Posts: 6Questions: 0Answers: 0
Hi!, the lib is amazing!
If you will hide/show many columns at once (but after table creation), you will have performance problems.
WHY:
1)with server side processing, each time a column hidden/shown an ajax request is unnecessary made.
2)the table is redrawn each time instead of only once.
SOLUTION:
1)creating a global variable datatables_server_fetching, modifying the fnServerData function accordingly and managing the "Processing..." message by hand:[code]
datatables_server_fetching=true;
oTable=$('#results_table').dataTable({
'bProcessing': true,
'bServerSide': true,
'sAjaxSource': 'server_procesing.php',
'fnServerData': function ( sSource, aoData, fnCallback ) {
if (datatables_server_fetching){
$.getJSON( sSource, aoData, function (json) {
fnCallback(json);
} );
}
},
});
[/code]And when a group of columns is hidden/shown:[code]
// show the "Processing" message
$(".dataTables_processing").css("visibility","visible");
// disable ajax
datatables_server_fetching=false;
//the timeout allows for the "Processing" message to be shown
setTimeout(function(){
$.each(columns,function(){
oTable.fnSetColumnVis( this.index, this.select);
});
$(".dataTables_processing").css("visibility","hidden");
datatables_server_fetching=true;
},100);
[/code]That improves things a lot and the "Processing..." message stays there the whole time of the operation. However it is still twice as slow as manually hiding the columns through CSS, what motivates the second tweak:
2)to avoid excessive redrawings one has to set the "hidden" third parameter of fnSetColumnVis, to false (in line 5)[code] oTable.fnSetColumnVis( this.index, this.select, FALSE);[/code]
that worked for me !
Message to the Allan:
it would be great to have an alternative to fnSetColumnVis capable of efficiently doing this group hidding/showing!
If you will hide/show many columns at once (but after table creation), you will have performance problems.
WHY:
1)with server side processing, each time a column hidden/shown an ajax request is unnecessary made.
2)the table is redrawn each time instead of only once.
SOLUTION:
1)creating a global variable datatables_server_fetching, modifying the fnServerData function accordingly and managing the "Processing..." message by hand:[code]
datatables_server_fetching=true;
oTable=$('#results_table').dataTable({
'bProcessing': true,
'bServerSide': true,
'sAjaxSource': 'server_procesing.php',
'fnServerData': function ( sSource, aoData, fnCallback ) {
if (datatables_server_fetching){
$.getJSON( sSource, aoData, function (json) {
fnCallback(json);
} );
}
},
});
[/code]And when a group of columns is hidden/shown:[code]
// show the "Processing" message
$(".dataTables_processing").css("visibility","visible");
// disable ajax
datatables_server_fetching=false;
//the timeout allows for the "Processing" message to be shown
setTimeout(function(){
$.each(columns,function(){
oTable.fnSetColumnVis( this.index, this.select);
});
$(".dataTables_processing").css("visibility","hidden");
datatables_server_fetching=true;
},100);
[/code]That improves things a lot and the "Processing..." message stays there the whole time of the operation. However it is still twice as slow as manually hiding the columns through CSS, what motivates the second tweak:
2)to avoid excessive redrawings one has to set the "hidden" third parameter of fnSetColumnVis, to false (in line 5)[code] oTable.fnSetColumnVis( this.index, this.select, FALSE);[/code]
that worked for me !
Message to the Allan:
it would be great to have an alternative to fnSetColumnVis capable of efficiently doing this group hidding/showing!
This discussion has been closed.
Replies
Interesting idea being able to pass in an array rather than an integer to set them as a group. Probably a good option for a plug-in API function :-)
Regards,
Allan