[Buttons Extension] Column visibility selection not working. Also broken on website example.

morrty

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

I've implemented it on my own site and it just doesn't work. The column that is supposed to be hidden still shows in the drop down. It's broken in that example I linked too. It shouldn't be showing "Name" but it does.

rf1234

I am using it in a different way and it works:

columnDefs: [
            {   targets: [2, 3, 4], visible: false }          
        ],
buttons: [
            {   extend: "create", editor: userPhoneEditor },
            {   extend: "edit",   editor: userPhoneEditor },
            {   extend: "remove", editor: userPhoneEditor },
                        "colvis"
        ]

Since I don't like the static numbering I usually add a class to the HTML like this:

<th class="hiddenCols">Update Time</th>

Then you can use the code below and don't have to worry about the numbering:

columnDefs: [
            // targets may be classes
            {   targets: "hiddenCols", visible: false }
        ],

morrty

It looks like you're hiding the entire column from the table? See, my column is visible in the table and I want to prevent colvis from being able to hide it.

rf1234

Oops, you are right. This was a bullshit answer. Sorry!
But now I tried it myself - and got it working. I used the same code as above and only changed my colvis definition like this:

{   extend: "colvis", columns: ':not(.hiddenCols)' },

Now my hidden column is not only hidden but it also cannot be made visible through the colvis button. If I delete my columnDefs above I have your case: Update Time column is shown and it cannot be hidden with the colvis button.

Apparently this is the problem which causes the error in the example that you mentioned:

columnDefs: [
            {
                targets: 1,
                className: 'noVis'
            }
        ],

I believe that this assigns the class 'noVis' not to column 1 (th element) but to all td fields WITHIN that column which are generated by datatables. Just try to assign the class directly to the th element in the HTML as in my example and it should work.

I use the assignment of classes to all of the td fields myself in this code example:

columnDefs: [
            // targets may be classes
            {   targets: "hiddenCols", visible: true },
            //assigns the className to to all td fields in the 
            //respective column(s) with the class noSelectCols
            {   targets: "noSelectCols", className: "noSelectFields"  }
        ],

HTML:
<th class="noSelectCols all">Info</th> <!--all = column never hidden-->
<th class="noSelectCols all">Documentation</th> <!--all = column never hidden-->
<th class="hiddenCols" id="updateTime">Update Time</th>     

Javascript to use the assigned class for all of the fields:
table
.on( 'user-select', function ( e, dt, type, cell, originalEvent ) {
                //get rid of leading spaces
                var className = originalEvent.currentTarget.className.trim();                                   
                if ( className == "noSelectFields" ) {
                    return false;
                }
            } ) 

morrty

Still couldn't get it to work so what I did was manually put the class on the table headers and it magically works now.

    <table class="table table-striped table-condensed datatable dt-responsive nowrap" width="100%">
        <thead>
            <tr>
                <th class="noVis"></th>
                <th>Account Number</th>
                <th>Account Name</th>
                <th class="hidden noVis">Search</th>
                <th>Variance</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

allan

Its a bug I'm afraid :-(. If you use the nightly versions it is resolved there.

Allan

rf1234

that's exactly what I did too - so we came to the sam solution
I inspected the example that you sent the link to. class noVis was assigned to the td elements not the th. And it was not assigned to the first column td elements but to the second column "Position"