I am implementing column showing/hiding using the colvis button extension and it seems to mostly work the way I would like. My issue is that I need to attach an action to all sub buttons in the collection and for the life of me I cannot figure out how to do this. I've tried just about every example I can and spent hours searching these forums for something I feel that should be simple.
Using the button-selector after creating the table does not appear to work as the buttons are not in the DOM unless the collections main button is clicked and the dropdown currently displayed. Using the examples from the button-selector page do not work no matter which method I try.
Here is the code for the button collection, with added show all and hide all buttons that are working as intended. When hide all is clicked then it is set to active and the show all button has its active state set to false.
buttons: [
{
extend: 'colvis',
text: "<i class='glyphicon glyphicon-eye-open' style='line-height: 1'></i><span> Columns</span>",
columns: ':not(.noToggle)',
name: 'columnVisibility',
prefixButtons: [
{
init: function (dt, btn) {
btn.children().css('font-weight', 'bold');
this.active(false);
},
action: function (e, dt, btn) {
dt.columns().visible(true);
actionTrackTable.buttons('hideAllColumns:name').active(false);
this.active(true);
},
text: 'Show all',
name: 'showAllColumns'
},
{
init: function (dt, btn) {
btn.children().css('font-weight', 'bold');
this.active(false);
},
action: function (e, dt, btn) {
dt.columns(':gt(1)').visible(false);
actionTrackTable.buttons('showAllColumns:name').active(false);
this.active(true);
},
text: 'Hide all',
name: 'hideAllColumns'
}
]
},
'pageLength']
What I wish to accomplish here is adding a listener to all of the other sub-buttons, that when clicked toggles the active state off for both the show/hide all buttons as now a specific column selection has been made. I tried using the examples in the https://datatables.net/reference/type/button-selector page and none seem to work as written.
