Hiding columns in ColVis extention for Buttons not working, what did I do wrong?

jStone

I have the following definition for my first five columns(there are many more than that):

 "columns": [
            {
                "data": "HasOwnerHistory"
                , "orderable": false
                , "visible": false
                , "className": 'notToggleVis'
            },
            {
                "data": "HasServiceHistory"
                , "orderable": false
                , "visible": false
            },
            {
                "data": "InForService"
                , "orderable": false
                , "visible": false
            },
            {
                "data": "Project"
            },
            {
                "data": "IsPartOfConfig"
                , "orderable": false
            },

The columns display/don't correctly.
I have the following in the DataTable to display ColVis

        , buttons:
            [
             {
                "extend": 'colvis'
                 , "columns": ':not(.notToggleVis)'
             }
            ] //end buttons

The ColVis button shows up correctly. However, no matter what I try for the columns, I can not get a single column to disappear from the list.

I've tried (columns: ':not(:first-child)') from the following discussion:
https://datatables.net/forums/discussion/35949
Didn't work.

My goal is to remove the first four columns from the ColVis list. I would have thought this would be easy but obviously, I've missed something. The first three columns are used to generate another column and are "meaningless" for the end user.

kthorngren

I've not sued colvis so my answer may not be what you are looking for. Here is an example where I want the first column to always be hidden because the user does not need to see the PKID. this may work if you want to simply hide the columns without buttons.

$(document).ready(function() {

    var table = $('#edit-table').DataTable( {
        ajax: '/maintain_testbed',
        columns: [
            { data: 'main.pkid' },
            { data: 'main.name' },
            { data: 'main.hosts' },
            { data: 'main.contact_centers' },
            { data: 'main.clusters' },
            { data: 'main.collections' },
        ],
        columnDefs: [
            {   "targets": [0], 
                "visible": false,
                "searchable": false 
            }
        ],
        select: {
            style: 'os',
            selector: 'td:not(first-child)'
        },
    } );

In columnDefs I set the column as not visible.

Kevin

allan

@jStone - That code looks like it should work. Could you give us a link to the page so it can be debugged please.

Allan

planbtelecom

I have the same problem, it seems the issue is when the datatables buttons are added by the 'B' option of the dom parameter. If the datatables buttons are added by direct insertion or in the initComplete event it works fine. Could it be possible that the buttons are added before the column headers are updated by the 'columns' parameter?

Here's 2 samples:
Not working with displaying the buttons by dom parameter.
Working with displaying the buttons by direct insertion

Another workaround is the add the class 'notToggleVis' directly in the table html definition:

<table>
   <thead>
      <tr>
         <th>Col 1</th>
         <th class="notToggleVis">Col 2</th>
      </tr>
   </thead>
</table>

allan

Excellent analysis - yes, that is basically what is happening.

The execution order is:

1. Build the column options including class names (but not updating the HTML just yet)
2. Add the feature plug-ins from the dom parameter
3. It gets the column information from the DOM directly
4. The header is "drawn" which results in classes etc being added

So yes, without doubt this is an integration bug between Buttons and DataTables core.

The best fix for this isn't immediately apparent I'm afraid. Its tempting to just change the execution order slightly, but I'm fairly certain that would introduce other issues. let me have a bit of a think about this - the dom option is in bad need of an overhaul anyway.

Allan

planbtelecom

@allan I'm not familiar with the DataTables codebase but could it be possible to populate the Column Visibility dropdown list in an event like init (sample)? I gave a try to preInit (sample) but it seems the buttons container isn't initialized at that point, perhaps populate the dropdown list when the container is initialized?

Another possibility would be to use lazy initialization of the Column Visibility dropdown list and populate it the first time it's shown (or every time it's shown?).

allan

The workaround at the moment is that you basically need to not have the B in the dom option.

This is where it is tripping up. Line 22 adds the options from dom - with the B in that string, that includes Buttons. Then it does the header set up and the the --event preInit` event you mentioned.

If buttons is defined in the config object, but B isn't in dom, then it will init Buttons at that point and it should work as expected. But you still need to insert the node into the document manually.

Another possibility would be to use lazy initialization of the Column Visibility dropdown list and populate it the first time it's shown (or every time it's shown?).

That's actually not a bad idea at all - thanks! At the moment you can have the buttons in a collection or not, but getting that list only when required sounds like a good idea to me.

Allan