Use jQuery selector with ColVis to exclude columns of certain classname

stuartsjb-icr

I want to prevent two of my table's hidden columns from being toggled as visible when using ColVis, but I'm finding the column selector article a bit confusing and can't figure out how to do this.

I've added a className of "nonUser" to the two columns I want to remain permanently hidden but I don't know how to get ColVis to work on all columns except for those two.

allan

The legacy ColVis plug-in doesn't support the column-selector type at all.

You would need to use Buttons' column visibility options if you want to use a column selector. There is an example here.

Allan

stuartsjb-icr

I am using the colvis extend of Buttons, sorry for the confusion there.

I've added a "toggleable" className to all of the columns on which I want visibility toggling available, but when I try to use the colvis column selector during the table's initialisation I get an error saying that the table's name is not defined.

Presumably then I need to add Buttons to the table after it's been created and not during its initialisation; how can I go about doing this?

stuartsjb-icr

I've managed to get the result I need by adding a class of "toggleable" to the HTML table TH elements instead of the datatables initialisation columns definitions.

I'm still uncertain how I would go about selecting all columns that are not of a particular class name (excluding columns of a certain class instead of including them) but I don't want to confuse myself further at this stage!

allan

I'm still uncertain how I would go about selecting all columns that are not of a particular class name

:not(.myClass)

See the jQuery documentation.

Allan

stuartsjb-icr

Thanks for that Allan.

I was expecting the colvis column selector to work on the classNames defined in the DataTable initialisation columns definitions the same way it does when specifying orthogonal data for PDF export, I think that's what tripped me up most there!

allan

It works off the class name for the header cells, which may include the columns.className.

Allan

legshooter

Hey guys,

From my experience stuartsjb-icr is right and the same thing threw me off (exporting).

In my case I couldn't figure out why:

extend: 'colvis',
columns: ':not(.control):not(.select-checkbox)'

wasn't working, while:

extend: 'colvis',
columns: 'gt(1)'

worked great.

Then I found out:

extend: 'colvis',
columns: function ( idx, data, node ) {
    // console.log(data) = [];
    // console.log(node.outerHTML) = <th></th>
},

And it all made sense.

I do have:

columns: [
    {
        className: 'control',
        // ...
    },
    {
        className: 'select-checkbox',
        // ...
    },
    // ...
]

set upon initialization, but where is that className exposed for me to use in the columns callback?

legshooter

Answered here:
https://github.com/DataTables/Buttons/issues/102

allan

Thanks for posting back with the link.

Allan

cersos

I could be wrong here, but I think the example page is not working as designed.

It states: note that the Name column is not included in the column visibility list, but it is.

https://datatables.net/extensions/buttons/examples/column_visibility/columns.html

allan

Actually, it should be the Position column that should not be in the list since the class is applied to that column (its 0 based indexes).

What is going wrong there is that the class is being assigned after the buttons are initialised I think.

Thanks for pointing out the error in the example. I'll get it working shortly.

Allan

prats

try something like this:

if(user_code === "US00001964"){
            oTable.column( 1 ).visible( false );
            oTable.button( '3-1' ).disable();
            oTable.button( '3-2' ).disable();
            }

allan

Fix committed into DataTables core. It will be in the nightly version in a few minutes time.

Allan

btree

Jesus, thank you for the fix. I tried to workaround for this problem for 4 hours.... should have looked early into the forum, would have been a nicer sunday.