Use jQuery selector with ColVis to exclude columns of certain classname

Use jQuery selector with ColVis to exclude columns of certain classname

stuartsjb-icrstuartsjb-icr Posts: 59Questions: 12Answers: 0

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.

Replies

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    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-icrstuartsjb-icr Posts: 59Questions: 12Answers: 0

    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-icrstuartsjb-icr Posts: 59Questions: 12Answers: 0

    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!

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    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-icrstuartsjb-icr Posts: 59Questions: 12Answers: 0

    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!

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

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

    Allan

  • legshooterlegshooter Posts: 6Questions: 2Answers: 0
    edited July 2016

    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?

  • legshooterlegshooter Posts: 6Questions: 2Answers: 0
  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    Thanks for posting back with the link.

    Allan

  • cersoscersos Posts: 40Questions: 10Answers: 1
    edited May 2017

    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

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    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

  • pratsprats Posts: 45Questions: 21Answers: 0

    try something like this:

    if(user_code === "US00001964"){
                oTable.column( 1 ).visible( false );
                oTable.button( '3-1' ).disable();
                oTable.button( '3-2' ).disable();
                }
    
  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

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

    Allan

  • btreebtree Posts: 99Questions: 14Answers: 11

    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. :neutral:

This discussion has been closed.