Search code examples
javascriptjquerybootstrap-table

How can I handle click events on a Bootstrap table dropdown menu that controls column visibility?

I'm currently building a table with Bootstrap Table. I'm also using the showColumns feature which enables a dropbox to choose which column to show.

Now I need to handle when the user clicks on one of the dropbox items with some custom commands.

I've already tried with

$(document).ready(function() {
        $(document).on('click', '.dropdown-item.dropdown-item-marker', function() {
        
        console.log("hello")
  });
});

but it doesn't work.

Solution

  • The bootstrap-table API actually has an event for this.

    The relevant part of the doc is:

    onColumnSwitch

    jQuery Event: column-switch.bs.table

    Parameter: field, checked

    Detail:

    It fires when switch the column visible (showColumns). The parameters contain:

    field: the field name corresponding to the switch column. checked: the checked state of the column.

    Assuming your table has an id table and you've set var $table = $('#table') then the following would work. I changed the "hello" in your question to output the event parameters just for the sake of the explanation.

    $table.on('column-switch.bs.table', function(e, field, checked) {
    console.log(field, checked)
    })

    Here is an example using the bootstrap-table online editor, but with an alert instead of logging to console.