How to hide column name from column visibility button?

muttBunch

Hello all,

My project is getting too large to post so I have included a test case.

Basically, in my app, I have a specific column that I hid from view in my table which works perfectly based on a condition. However, I'd like to also hide it from the "Column Visibility" button as well.

In my test case, for example, I'd like to hide the "Age" button in the column visibility button. You would think that doing this in initComplete would work:

$('[data-cv-idx="3"]').hide();

But it does not. Yet, if you actually enter $('[data-cv-idx="3"]').hide(); in the console (not the fiddle console, but the actual browser console after you inspect), it actually does work to hide it from the button view.

Am I not understanding the "initComplete" function correctly? Or am I really close?

Test case link: https://live.datatables.net/wohokixu/3/edit

Thanks,

tangerine

From the colvis docs:

columns undefined
Columns selector that defines the columns to include in the column visibility button set. By default this is undefined which results in all columns being selected, but any of the column-selector options can be used to define a custom button set.

muttBunch

Thanks tangerine, but I'm not quiet understanding that.

allan

I'm a touch confused myself - I don't see a data-cv-idx attribute in the example at all other than the initComplete function - but it won't match anything.

Your question suggests you might be wanting to hide buttons, but it also suggests you might want to hide an entire column (which is what @tangerine was answer based on).

Could you clarify these points and perhaps update the test case, so I can offer some help?

Hiding a column from ColVis is easy with the columns option for colvis as @tangerine mentioned: https://live.datatables.net/wohokixu/4/edit .

Allan

allan

Oh! It has just clicked for me. data-cv-idx is part of the button you want to hide from ColVis! Not in the data of the table!!!

Right in that case, use my example code.

Your own didn't work because the dropdown buttons are not in the document until they are needed. They are appended on the activation of the Column visibility button. Therefore, $('[data-cv-idx="3"]') finds nothing in initComplete.

Allan

muttBunch

Thank you Allan, that's what I was thinking, just wanted to make sure that was correct. So basically, the table draws, then the [data-cv-idx="3"] is available generated from datatables, most likely right after initComplete. Sometimes I suck at explaining things haha!

allan

It's added only when it is needed - i.e. the user clicked on the drop-down button.

The columns option is the way to control the selected columns for the drop-down.

Allan