How do I update the columns indicator when using an onclick function

mmarzs

I'd like to hide and display certain columns of my table when clicking on a button on the page. It toggles between and "all" and "unique" list view (which filtered by a hidden table column).

The columns hide and appear correctly in the table however I can't seem to get the columns to remove or show in the colvis dropdown, or use the export or search builder classes I have on the column data based on the click action.

Any help would be appreciated!

Here is the colvis button example. Export uses .export and search-builder uses .search-builder.

   {
        extend: 'colvis',
        collectionLayout: 'two-column',
        text: '<i class="far fa-address-book mr-2 ml-2"></i>',
        className: 'btn-data-table btn-sm m-b-xs d-print-none data-table-icon-btn',
        columns: '.colvis',
        attr:  {
            id: 'ColumnsButton'
        },
        prefixButtons: [
        
        {
            extend:'colvisGroup',
            text:'<i class="far fa-window-restore mr-1"></i>RESET TABLE',
            action: function(e, dt, node, config) {
                table.state.clear();
                window.location.reload();
            }
        },

        ]
    }

Here is my onclick function. Note - I also have #unique-records class

   $('#unique-records').on('click', function () {
         table.columns('filter:name').search("true", true, false, true).draw();
      //Button Toggle setting
         $(this).button('toggle');
         $('#all-records').button('dispose');
         $('#all-records').removeClass("active");
        // update classnames for button actions ---- this is not working
         $('.colvis-unique').addClass("export");
         $('.colvis-unique').addClass("colvis");
         $('.colvis-unique').addClass("search-builder");
         $('.all-export-only').removeClass("export");
         $('.all-export-only').removeClass("colvis");
         $('.all-export-only').removeClass("search-builder");
          //columns to hide from display  -- works
          var columns = table.columns('.all-only');
          columns.visible( ! columns.visible() );
        //columns to show from display -- works
         var columnsShow = table.columns('.unique-only');
         columnsShow.visible( columns.visible() );
         table.order([2, 'desc']).draw();
       });
    
    
        $('#all-records').on('click', function () {
             table.columns('filter:name').search("true|false", true, false, true).draw();
             //Button Toggle setting
             $(this).button('toggle');
             $('#unique-records').button('dispose');
             $('#unique-records').removeClass("active");
            // update classnames for button actions ---- this is not working
             $('.colvis-unique').removeClass("export");
             $('.colvis-unique').removeClass("colvis");
             $('.colvis-unique').removeClass("search-builder");
             $('.all-export-only').addClass("export");
             $('.all-export-only').addClass("colvis");
             $('.all-export-only').addClass("search-builder");
             // class names for action button
            // $('.colvis-unique').removeClass("search-builder");
                // Hide columns not for this view
             var columns = table.columns('.unique-only');
              columns.visible( ! columns.visible() );
              // Show columns for this view
             var columnsShow = table.columns('.all-only');
              columnsShow.visible( columns.visible() );
              //re-order table
             table.order([2, 'desc']).draw();
           });
    

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Please provide a link to your page or a test case so we can take a look to help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

mmarzs

@kthorngren here you go!

https://codepen.io/mmarzo/pen/jOmExgr

I am trying to get the columns used in the colvis and search builder to change when the button is clicked. I tried initializing the buttons after the table and had little success as well.

Thanks again for your help!

colin

It looks like the ColVis buttons aren't updating when the visibility is changed via the API. The only thing I can think of doing is instead of calling column().visible() is to trigger the button instead with buttons().trigger(),

Colin

mmarzs

Hi @colin! Do you happen to know of any examples of this? I not exactly sure what I should change to do this. Would I not call the buttons at all in the table config?

mmarzs

@colin just an update. I was able to get it to work on my example for both the search builder and export by making sure classes were removed before columns were hidden and added after they were displayed. I then used:

table.searchBuilder.rebuild();

to call the search builder. Is there anything similar for colvis?

mmarzs

The other think I was thinking was if I could assign/update the class to use for export and colvis on the buttons after initialization.

colin

Oddly, I just tried it here, with a very basic example, and it shows my earlier statement is wrong - changing the visibility via the API does change the colvis button status. It's making me think I'm not understanding the problem - though this is early on Sunday morning after England's football game so I might be missing something...

Colin

mmarzs

Hi @Colin - It looks like it doesn't let you remove or add back in the field for the Colvis. My goal is to hide certain items in the colvis dropdown and show them when another button is clicked. Does that makes sense? In your example, I'd like the "postition" to also hide from the colvis menu when you click your hide button.

colin

Yep, that makes sense, and here it is

I tweaked my last example to do just that. It removes all the colvis buttons from the collection when the hide button is clicked, and then re-adds just the visible buttons. You could use that as a starting point,

Colin

colin

I did just notice that it goes a bit wobbly when the colvis buttons are clicked, but hopefully there's enough there to get you going!

Colin