How to hide column name from column visibility button?

How to hide column name from column visibility button?

muttBunchmuttBunch Posts: 10Questions: 3Answers: 0

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,

Answers

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    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.

  • muttBunchmuttBunch Posts: 10Questions: 3Answers: 0

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

  • allanallan Posts: 63,237Questions: 1Answers: 10,418 Site admin

    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

  • allanallan Posts: 63,237Questions: 1Answers: 10,418 Site admin

    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

  • muttBunchmuttBunch Posts: 10Questions: 3Answers: 0

    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!

  • allanallan Posts: 63,237Questions: 1Answers: 10,418 Site admin

    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

Sign In or Register to comment.