Slow columns hide/show

AlekXL

I use simple script to toggle full or short view on columns like this:
[code]
function toggleShort(){
/* Get the DataTables object again - this is not a recreation, just a get of the object */
var t = $('#example').dataTable();

var bVis = t.fnSettings().aoColumns[5].bVisible;
shortVersion=bVis===false;
oTable.fnSetColumnVis( 2, bVis ? false : true );
oTable.fnSetColumnVis( 5, bVis ? false : true );
oTable.fnSetColumnVis( 6, bVis ? false : true );
oTable.fnSetColumnVis( 7, bVis ? false : true );
oTable.fnSetColumnVis( 8, bVis ? false : true );
oTable.fnSetColumnVis( 9, bVis ? false : true );
oTable.fnSetColumnVis( 10, bVis ? false : true );

if (bVis===false){ $("#idVersionSel").html("Short Version");}
else {$("#idVersionSel").html("Full Version");}
}
[/code]
I works, but also It lags as hell , even on modern desktop PC, and the we are going to use it on tablets.
So is there any way to do it faster?

allan

fnSetColumnVis is recalculating the column widths etc by default every time you call it. The third parameter allows you to override this. So you could do:

[code]
function toggleShort(){
/* Get the DataTables object again - this is not a recreation, just a get of the object */
var t = $('#example').dataTable();

var bVis = t.fnSettings().aoColumns[5].bVisible;
shortVersion=bVis===false;
oTable.fnSetColumnVis( 2, bVis ? false : true, false );
oTable.fnSetColumnVis( 5, bVis ? false : true, false );
oTable.fnSetColumnVis( 6, bVis ? false : true, false );
oTable.fnSetColumnVis( 7, bVis ? false : true, false );
oTable.fnSetColumnVis( 8, bVis ? false : true, false );
oTable.fnSetColumnVis( 9, bVis ? false : true, false );
oTable.fnSetColumnVis( 10, bVis ? false : true );

if (bVis===false){ $("#idVersionSel").html("Short Version");}
else {$("#idVersionSel").html("Full Version");}
}
[/code]

And that should be a whole lot faster.

Allan