'Capture if any list item in colVis DataTable is selected
I'm using the colVis button of DataTables to show/hide some of my table columns; I would like to implement an icon that change color based on if I'm seeing the full table (all the rows visible), or the modified one (some of the rows are deselected by colVis).
Code:
buttons: [
{extend: 'colvis',
orientation : 'landscape',
pageSize : 'LEGAL',
className: 'ux btn colvis',
collectionLayout: 'three-column',
postfixButtons: [
{
extend:'colvisGroup',
text:'Sel. tutte',
show:':hidden'
}
]}
]
The main problem I'm facing is that I don't know how to access the list item buttons, neither am I able to know if a button inside colVis is active or not.
example
If you look at the picture, if one or more of the list item are selected, the circled button on the top right should become red.
Solution 1:[1]
You can do this by detecting when a column's visibility changes, using the column-visibility.dt event, which will be triggered any time the colvis button is used.
When the event is triggered, you can tell if all columns are visible using columns().visible().toArray(), which returns an array of Booleans corresponding to each column's visibility.
Something like this:
table.on('column-visibility.dt', function (e, settings, column, state)
{
if (table.columns().visible().toArray().every(x => x))
{
// All columns are visible, so set your buttons to normal
} else
{
// Some columns are hidden; set your buttons to red.
}
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Aaron Dunigan AtLee |
