How to select all sub buttons in colVis button collection

mattwc93

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.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Colin