(Workaround) Showng/Hiding many columns at once is slow!

(Workaround) Showng/Hiding many columns at once is slow!

dbuezasdbuezas Posts: 6Questions: 0Answers: 0
edited April 2011 in DataTables 1.8
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!

Replies

  • dbuezasdbuezas Posts: 6Questions: 0Answers: 0
    edited May 2011
    .
  • allanallan Posts: 61,697Questions: 1Answers: 10,102 Site admin
    Yup - setting the final parameter to false and then when you are done changing the column visibility just call fnDraw is how I would recommend changing the state of multiple columns at a time.

    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
This discussion has been closed.