colvis with responsive

jd0000

I think its been mentioned a few times that ColVis and Responsive do not (and are not meant to) work together. I'm trying to see if there is anyway to create a ColVis-like extension that would work directly with Responsive. I would think to begin with that if we could just add 'none'/'all'/'never' to a column it would ideally do what we want. But I'm not sure how to add that after initialization - adding the class to the existing table columns doesnt help since it looks like Responsive uses settings derived only from the initial settings.
Anyone have any thoughts on anyway to make something like this work?

allan

You might be interested in the discussion in this thread about integrating these two extensions: https://www.datatables.net/forums/discussion/22677 .

Responsive uses settings derived only from the initial settings.

Use responsive.rebuild() to recalculate the class logic.

Allan

jd0000

Ok actually that rebuild example was very helpful.
i dont know if this is going to work out in the long run, but a very quick/dirty hack got me somewhat what i was looking for. in colvis i changed any checks on bVisible to instead check if there was 'none' in the sName. and for the button clicks i'm replacing the fnSetColumnVis calls to use that example from responsive.rebuild() to toggle the 'none' class and rebuild responsive. and my crude testing right now seems to work -- selecting/unselecting the column in colvis will now move the column to/from my details row.
I assume that its only going to work for the very specific scenario i have it tested on but its a place to start.
thanks!

allan

Good to hear. I think this is basically the approach I'm be taking, as per the thread I linked to above, although nice an general rather than a specific use case :-)

Allan

jd0000

ok great ! i look forward to a real working solution (mine is sad).
One thing someone may be able to help with -
considering there is only minimal changes, in the click handler in _fnDomColumnButton,
my code seems to work fine when i specifically click on the checkbox itself. But if i click on the label or elsewhere on the LI, it fires twice so it hides and then unhides immediately. is there another handler somewhere im missing?
only thing changed is this:

<code>

                    if (that.s.useResponsive)
                    {

                        var tableApi = that.s.dt.oInstance.api()
                        $( tableApi.column( i ).header() ).toggleClass( 'none' );
                        tableApi.responsive.rebuild();
                        tableApi.responsive.recalc();
                    }
                    else
                    {

                        // Optimisation for server-side processing when scrolling - don't do a full redraw
                        if ( dt.oFeatures.bServerSide )
                        {
                            that.s.dt.oInstance.fnSetColumnVis( i, showHide, false );
                            that.s.dt.oInstance.fnAdjustColumnSizing( false );
                            if (dt.oScroll.sX !== "" || dt.oScroll.sY !== "" )
                            {
                                that.s.dt.oInstance.oApi._fnScrollDraw( that.s.dt );
                            }
                            that._fnDrawCallback();
                        }
                        else
                        {
                            that.s.dt.oInstance.fnSetColumnVis( i, showHide );
                        }
                    }

</code>

allan

But if i click on the label or elsewhere on the LI, it fires twice so it hides and then unhides immediately. is there another handler somewhere im missing?

No - that's a PITA that is. I need to rework the ColVis code to stop that from happening...

Allan

jd0000

ok glad im not going crazy!