ColVis weirdness

johnblythe

Yo yo!

I've got a pretty sizable table. Only 11 rows, but a total of 129 columns / 1419 cells. we're using ColVis to help the user keep things tidier while looking around. due to the size it's slow as can be. as such, i've tried adding a little preloader that we have throughout the site to be used before it begins hiding the columns, around line 567.

my modified code looks like this:

return $(
                '<li class="ColVis_Special '+(dt.bJUI ? 'ui-button ui-state-default' : '')+'">'+
                    '<label>'+
                        '<input type="checkbox" />'+
                        '<span>'+oGroup.sTitle+'</span>'+
                    '</label>'+
                '</li>'
            )
            .click( function (e) {
                startCurvoLoader(["Just a moment, please", "We're reorganizing your data"]);
                // Throwing this in a damned timeout
                // function doIt() {
                    var showHide = !$('input', this).is(":checked");
                    if (  e.target.nodeName.toLowerCase() !== "li" )
                    {
                        showHide = ! showHide;
                    }

                    for ( var j=0 ; j < oGroup.aiColumns.length ; j++ )
                    {
                        that.s.dt.oInstance.fnSetColumnVis( oGroup.aiColumns[j], showHide );
                        if (j == oGroup.aiColumns.length - 1) {
                            realignChildRows();
                        }
                    }
                // }// doIt()

                // // Give some delay for curvoLoader to start
                // setTimeout(doIt, 100);
            } )[0];

as you can see, i've got some lines commented out. i had been using a timeout to allow the loader to hit the dom before the dom got completely overloaded with the for() statement. while the browser still froze for a bit (so much so that the gif preloader didn't even animate, just froze on the first frame) while sorting through the columns to hide (note: they're all in groups, in this context, of 8 columns) it at least gave the user a visual indication that something was happening. the problem came in on the restoration of those columns. it simply wouldn't work. i have no idea why the code works fine both to hide and show when outside of a timeout, but when being placed within a function set to timeout it only works in one direction.

any ideas?

thanks!

johnblythe

Feel free to chime in for the sake of other people's benefit, but i ended up just throwing my hands up last night and write our own little custom plugin to get the job done. It seems to get around some of the small hangups like above that I'd experienced w ColVis. Unfortunately it's not really any faster like I was hoping to see, but I suppose that's just a result of having such a large data set. Any tips on how to boost performance?

allan

If speed is required and you are changing the state of multiple columns, I would suggest using the new API - column().visible() - and set the second and third parameters to be false. Then call columns.adjust() after the loop is done. That should provide a major speed boost - particularly if you are using scrolling in the table.

I should note that ColVis will soon be replaced by new software which will use the new API.

Allan

johnblythe

Is looping through column(x).visible going to be markedly different than columns([x,y,z]).visible()?

i've currently got:

table.columns(cols).visible(show, false);
table.columns.adjust().draw();

johnblythe

I just gave it a whirl, changing it to:

for(i=0; i<cols.length; i++) {
                        table.column(cols[i]).visible(show, false, false);
                    }
                    // table.columns(cols).visible(show, false);
                    table.columns.adjust().draw();

seems slightly faster. not sure if it's because the third parameter being false or the one-by-one approach. what is the third parameter, anyway, not seeing it listed anywhere?

allan

No - using columns().visible() and column().visible() should make not significant difference. columns().visible() is probably easier to read and therefore better to use - I mentioned column().visible() because it is a direct replacement in the code above.

Allan

johnblythe

Oo, gotcha. Cool. One last thing: what's the third parameter?

allan

Sorry - I was thinking of an internal function. Ignore that - there are only two parameters :-)

Allan

johnblythe

Lol, gotcha. I added an extra false at the end in blind faith haha.

Thanks, Allan. Best-