在标题（th）上添加按钮以在引导表中隐藏和显示过滤器控件

Question

我正在使用带有过滤器控件的引导表。 我希望能够在我的每个 th 上添加一个按钮（图标）来隐藏和显示过滤器控件。

有没有办法做到这一点？

这是引导表的示例： https : //live.bootstrap-table.com/example/extensions/filter-control.html

如您所见，过滤器控件在标题上占据了很多位置。 我只是想看看是否可以通过在标题上添加一个图标来添加过滤器控件，该图标在单击该图标时添加过滤器控件。

我的代码：

<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()
  })

当我尝试为图标添加附加时：

    $('#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)
  })

对于初学者来说，它只是增加了第一个图标th和第二个问题是，点击它，它的数据，而不是各种各样的给我假警报我成立了，看看点击工作。

如何在不影响排序的情况下在左侧添加可点击的图标？

Answer 1

您可以在th-inner下的each循环中附加您创建的span ，以便它与标题并排显示。此外，您可以隐藏filter-control div，它包含您需要使用的过滤器input或select 。那么，无论何时? 单击只是获取此 div 的参考以显示/隐藏相同。

演示代码：

 $(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>