Is there a way to capture a column visibility change before it changes the column visibility?
Is there a way to capture a column visibility change before it changes the column visibility?

I am using column visibility to show and hide columns, but I also have the ability for users to filter within a specific column, and show/hide other columns that are related.
When someone filters in a column and then hides it, the filter is left active. Similarly, if a related column is shown, when the primary column is hidden, the related column is left shown.
I am wondering if there is a way to capture the change of visibility event so I can clear any filter and hide any related columns before it gets hidden?
I tried using a click event on .buttons-columnVisibility
, but it seems like it happens after the column is hidden, so I don't think I have a way to clear the filter as it has disappeared by the time I get access to it.
Thanks!
Answers
Use the
column-visibility
event to know when a column's visibility is changed.Allan
Thanks! That still happens after the visibility change though, so I am unsure how to access the details of the column in order to clear the filter and hide related columns.
The column filtering is done in a similar way to https://datatables.net/extensions/fixedcolumns/examples/styling/col_filter.html (but the inputs are in the th elements).
Is there a way either to run code before a column is hidden, or to clear that filter and also get the data attributes of the th to determine which are the related columns once it has been hidden?
Thanks again!
Use
column().header()
to get the header. Use jQuery to get the header node, as shown in the example in the docs, to clear the search input and access the data attributes. You may also need to usecolumn().search()
with an empty string to clear the search if clearing the input doesn't trigger the search. If you still need help can you provide a simple test case showing what you are doing so we can offer more specific suggestions?https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
I figured out how to clear the search after the column was hidden!
I haven't yet figured out how to get the data attributes from the th.
EDIT: Thanks kthorngren, looks like we posted at about the same time
I'm still trying to figure out how to get to the th from the column object.
Maybe something like this in the
column-visiblity
:EDIT: update the above code.
Kevin
.header()
is the key! ThanksI would like to recommend a documentation update for https://datatables.net/reference/api/columns().nodes() which suggests that
.nodes()
would includeth
s - I got stuck for a while trying to figure out why the th weren't appearing in.nodes()
- it would be great to update that to point people to.header()
for gettingth
sThanks again.
Sorry - I missed the before keyword. The
column-visibility
parameter passed in the column in question as the third parameter (column index) which can be used as a selector to get the column and thus clear the search for it.Allan
It is legal to have
th
in thetbody
. According to the HTML spec theth
is used withtr
. The examples showth
in thetbody
.Kevin
No - a
th
must be a child oftr
(which in turn is allowed in thethead
,tbody
ortfoot
).Which specific example are you referring to?
Allan