Add button on header (th) to hide and show filter control in bootstrap table

Question

I am using bootstrap table with filter control. I want to be able to add a button(icon) on each of my th's to hide and show the filter control.

Is there a way to do that?

This is an example on bootstrap table: https://live.bootstrap-table.com/example/extensions/filter-control.html

As you can see the filter control takes up a lot of place on the header. I just wanted to see if it was possible to only add the filter control by adding an icon on the header that adds the filter control on click of that icon.

My code:

<table
  id="table"
  data-url="json/data1.json"
  data-filter-control="true"
  data-show-search-clear-button="true">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name" data-filter-control="input" data-sortable="true">Item Name</th>
      <th data-field="price" data-filter-control="select" data-sortable="true">Item Price</th>
    </tr>
  </thead>
</table>

JS

 $(function() {
    $('#table').bootstrapTable()
  })

When I try and add the append for the icon:

    $('#table thead th').each(function() {
    s = $('<span style="position: absolute; left: 4px; top: 8px; cursor: pointer;">?</span>')
    s.click(function(e) {
        e.stopPropagation();
        alert('Question mark clicked')
    });
    $(this).append(s)
  })

For starters, it only adds the icon on the first th and the second problem is that on click it, it sorts the data instead of giving me the dummy alert I set up to see if the click is working.

How do I add a clickable icon on the left without affecting the sorting?

Answer 1

You can append span which you have created inside each loop under th-inner so that it will appear side by side of the header .Also , you can hide filter-control div this contains the filter which you need to use either input or select .So , whenever ? is clicked just get reference of this div to show/hide same.

Demo Code :

 $(function() { $('#table').bootstrapTable() $(".filter-control").hide() //hide filter control $('#table thead th').each(function() { s = $('<span style="position: absolute;margin-left:10px">?</span>') s.click(function(e) { e.stopPropagation(); //get closest filter control div hide/show same $(this).closest("th").find(".filter-control").toggle(); }); //append span inside th-inner class $(this).find(".th-inner").append(s) }) })

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.js"></script> <script src="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/extensions/filter-control/bootstrap-table-filter-control.js"></script> <table id="table" data-filter-control="true" data-show-search-clear-button="true"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name" data-filter-control="input">Item Name</th> <th data-field="price" data-filter-control="select">Item Price</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Item 1</td> <td>$1</td> </tr> <tr> <td>2</td> <td>Item 2</td> <td>$2</td> </tr> </tbody> </table>