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

dtuser1854

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!

allan

Use the column-visibility event to know when a column's visibility is changed.

Allan

dtuser1854

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!

kthorngren

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 use column().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

dtuser1854

I figured out how to clear the search after the column was hidden!

let table=$("table").DataTable();
table.column(column.search("").draw();

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.

kthorngren

Maybe something like this in the column-visiblity:

var api = new $.fn.dataTable.Api( settings );
var th = api.column( column ).header();
var dataAttr = $(th).data('myAttr');

EDIT: update the above code.

Kevin

dtuser1854

.header() is the key! Thanks

I would like to recommend a documentation update for https://datatables.net/reference/api/columns().nodes() which suggests that .nodes() would include ths - 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 getting ths

Thanks again.

allan

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

kthorngren

It is legal to have th in the tbody. According to the HTML spec the th is used with tr. The examples show th in the tbody.

Kevin

allan

No - a th must be a child of tr (which in turn is allowed in the thead, tbody or tfoot).

Which specific example are you referring to?

Allan