column-visibility
Column visibility event - fired when the visibility of a column changes.
Description
This event is fired whenever a column's visibility is altered through the column().visible() method and can be useful for plug-ins which work with columns to identify changes in column visibility state and update their own state to take account of the change.
Responsive integration: If you are using the Responsive extension for DataTables for DataTables, it will affect the visibility of columns, but it does not use the DataTables column visibility options, so this event will not be triggered by Responsive showing or hiding columns. Instead, use the responsive-resize event.
Please note that, as with all DataTables emitted events, the event object has a DataTables API instance available on it (the first parameter). Additionally, the events are triggered with the dt namespace. As such, to listen for this event, you must also use the dt namespace by simply appending .dt to your event name, as shown in the example below.
Type
function( e, settings, column, state, recalc )
Parameters:
| Name | Type | Optional | |
|---|---|---|---|
| 1 | e | No | |
jQuery event object | |||
| 2 | settings | No | |
DataTables settings object | |||
| 3 | column | No | |
Column index that has changed state | |||
| 4 | state | No | |
Column visibility state: | |||
| 5 | recalc | No | |
Since 1.10.10: Column width recalculation: This can be useful to improve performance when the visibility of multiple columns is modified. The | |||
Example
Notify when column visibility is changed:
let table = new DataTable('#myTable');
table.on('column-visibility.dt', function (e, settings, column, state) {
console.log(
'Column ' + column + ' has changed to ' + (state ? 'visible' : 'hidden')
);
});Related
The following options are directly related and may also be useful in your application development.