Slow scaling off column.visible - how can i make this instant?

AnubisJP

Hey there, I have a table of over 200 columns and 20 rows. Each column has similar data every 6 columns.
columns: 1a 1b 1c 1d 1e 1f 2a 2b 2c 2d 2e 2f etc

With a checkbox, i want to be able to hide/show each 'b' column (and once working, have a checkbox for each a, b, c, d, e, f)

The solution i came up with is shown here: http://live.datatables.net/maxukowo/2/edit

it works well with a few columns but with over 200 columns, i have to wait many seconds for it to hide/show each click.
In my local env it is taking 10 seconds!!

I imagine the for loop is much of this problem?

Can someone explain why this is happening and if there is a way to make this almost instantaneous please?

Thanks,
J

colin

This is a lot faster here. I'm setting all the columns visibility in a single operation with columns().visible().

Hope that does the trick,

Colin

AnubisJP

Thank you Colin, exactly what I was looking for! Much appreciated.

AnubisJP

Hi Colin - just trying to incorporate this to my local env, it works well except it does not remove the column header but only the cells under the header. Data in the columns then move to the left and all are misaligned.

Any idea why this could happen?

kthorngren

Could be lots of things like how you are creating the header, if there is more than one, using Fixedheader or fixedcolumns or maybe the scrolling features, maybe CSS. Can you update Colin's example to replicate your issue?

Kevin

AnubisJP

I tried to narrow it down - issue replicated: http://live.datatables.net/cuporibu/2/edit

Thanks for your ongoing help

kthorngren

I'm seeing this error in the browser's console:

jquery.dataTables.js:8572 Uncaught TypeError: Cannot read property 'bVisible' of undefined

I updated your test case to get the number of columns and use that as the upper limit of the for loop. Otherwise you are trying to hide columns that don't exists causing the error and causing the script to stop processing.

http://live.datatables.net/boqiluma/1/edit

Kevin

AnubisJP

ah great spot! that was next on my list to fix. Thanks Kevin.

I also have a similar loop when initialising the table (it recolour cells depending on their value and which column they're in).

How would i reference the column count within the initialisation of the table itself? I tried to do this below on line 13/14 but now the table does not load

$(document).ready(function() {

  var tst_table = $('.tst_class').DataTable( {
    paging:         false,
    info:         false,
    scrollX:        true,
    fixedColumns:   {
      leftColumns: 1
    },
    // td colour changes
    "createdRow": function( row, data, dataIndex ) {
        var i;
        var numCols = tst_table.columns().count();
        for (i = 1; i < numCols; i=i+6) {
            if ( data[i+4] == 'W' ) {        
... etc

kthorngren

My guess is tst_table in line 13 is undefined because the tst_table variable has not been instantiated, ie, Datatables has not completed initialization. Try changing tst_table.columns().count(); to data.length, the number elements in the row data array.

Please update the test case if you still need help.

Kevin

AnubisJP

Thank you! Thats solved it. - much appreciated.