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

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

mmarzsmmarzs Posts: 12Questions: 4Answers: 0
edited June 2021 in Buttons

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • mmarzsmmarzs Posts: 12Questions: 4Answers: 0

    @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!

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    edited July 2021

    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

  • mmarzsmmarzs Posts: 12Questions: 4Answers: 0

    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?

  • mmarzsmmarzs Posts: 12Questions: 4Answers: 0

    @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?

  • mmarzsmmarzs Posts: 12Questions: 4Answers: 0

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • mmarzsmmarzs Posts: 12Questions: 4Answers: 0

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    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

Sign In or Register to comment.