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 function( e, settings, column, state, recalc )
- Parameters:
Name Type Optional 1 eNo jQuery event object
2 settingsNo DataTables settings object
3 columnNo Column index that has changed state
4 stateNo Column visibility state:
falseif column now hidden, ortrueif visible5 recalcNo Since 1.10.10: Column width recalculation:
falseif no column width calculation was performed when the column was hidden (i.e. the second parameter ofcolumn().visible()wasfalse), otherwise,trueorundefinedindicating that the column widths were recalculated.This can be useful to improve performance when the visibility of multiple columns is modified. The
columns.adjust()method should be called once all columns have had their visibility state set.
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.