1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<?xml version="1.0" encoding="UTF-8" ?>
<dt-event>
<name>column-visibility</name>
<summary>Column visibility event - fired when the visibility of a column changes.</summary>
<since>1.10</since>
<type type="function">
<signature>function( e, settings, column, state, recalc )</signature>
<parameter type="object" name="e">
jQuery event object
</parameter>
<parameter type="DataTables.Settings" name="settings">
DataTables settings object
</parameter>
<parameter type="object" name="column">
Column index that has changed state
</parameter>
<parameter type="object" name="state">
Column visibility state: `false` if column now hidden, or `true` if visible
</parameter>
<parameter type="boolean|undefined" name="recalc" since="1.10.10">
Column width recalculation: `false` if no column width calculation was performed when the column was hidden (i.e. the second parameter of `dt-api column().visible()` was `false`), otherwise, `true` or `undefined` indicating that the column widths were recalculated.
This can be useful to improve performance when the visibility of multiple columns is modified. The `dt-api columns.adjust()` method should be called once all columns have had their visibility state set.
</parameter>
<scope>HTML table element</scope>
</type>
<description>
This event is fired whenever a column's visibility is altered through the `dt-api 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](//datatables.net/extensions/responsive/) 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 `r-event responsive-resize` event.
Please note that, as with all DataTables emitted events, this event is 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.
</description>
<example title="Notify when column visiblity is changed"><![CDATA[
$('#example').dataTable();
$('#example').on( 'column-visibility.dt', function ( e, settings, column, state ) {
console.log(
'Column '+ column +' has changed to '+ (state ? 'visible' : 'hidden')
);
} );
]]></example>
<related type="option">columns.visible</related>
<related type="api">column().visible()</related>
<related type="api">columns().visible()</related>
</dt-event>
|
