Buttons ColVis - columns selector is not working with columns defined via JS-Object

friek2k

Hello everybody,
today I tried to change from the old ColVis extension to Buttons. I came across with two problems. Perhaps these are Bugs, but maybe I'm doing something wrong.

First I found a problem with newer jQuery versions. The function call .andSelf() used in the dataTables.buttons.js script throws an error while trying to close the ColVis popup (jquery > 3.0.0).
To solve the problem you just have to replace the call with .addBack().

https://jsfiddle.net/friek2k/uy37fv6o/

Second I tried to use the columns property of the ColVis button with a CSS selector to show just a few columns at the list (to show/hide).
This worked perfectly when the columns are defined via HTML.
https://jsfiddle.net/friek2k/fjwjfuxL/

But when I define the same columns with exactly the same CSS classes as JS object, the CSS selector does not work.
https://jsfiddle.net/friek2k/4f98b6sv/

Thanks for the support!

allan

Hi,

Thanks for your post.

1) The fix for this was committed just last week and will be included in the 1.2.2 Buttons release that I expect to release later this week.

2) That's interesting - thanks! I'm not immediately sure why that isn't working I'm afraid. I'll need to get back to you on that one.

Regards,
Allan

friek2k

Hi Allen,
I think, in the case the colums are defined by JS-Object, the attributes are not set to the nTh property. You're creating a new <th></th> element at the fnAddColumn(...) function and probably the fnColumnOptions(...) function should set the attributes but does not. So after the initialization the nTh property of all columns is just a <th></th> and the jQuery selector does never match.

The easiest way to show that nTh is just <th></th> is:

        buttons: [
            {
                extend: 'colvis',
                columns: function ( idx, data, node ) {
                    console.log(node.outerHTML);
                }
            }
        ]

https://jsfiddle.net/friek2k/x5v14fv0/

regards,

allan

Thanks for the fiddles and your investigation! The issue is being caused by the initialisation order. The B option in the dom constructor is causing Buttons to be initialised before the columns have been added.

If we create Buttons after the table has been created it works well.

I think this is a flaw in how the dom property works. I'm going to rework it (possibly replace it in fact) for the next major version of DataTables and I'll take this into account at that point.

Allan

friek2k

Thank you very much Allan! I now use the initComplete event to add the ColVis Button. That works fine.

AlexCh

@allan we just update dataTable and buttons, but we still have the same issue when initializing column visibility in js. I look at your example, but seems not to work anymore , the list of columns in the buttons is empty. Do you have a solution about it?

AlexCh

It is ok, usgin colums do the trick