在 header (th) 上添加按钮以在 bootstrap table 中隐藏和显示过滤器控件

Question

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

有办法吗？

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

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

我的代码：

<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

您可以将在 each 循环中创建的 span 追加到 th-inner 下，这样它将与 header 并排显示。此外，您还可以隐藏 filter-control div 这包含您需要使用 input 或 select 的过滤器。因此，每当单击 ? 时，只需获取此 [= 的引用32=] 到 show/hide 相同。

演示代码 :

$(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></td>
    </tr>
    <tr>
      <td>2</td>
      <td>Item 2</td>
      <td></td>
    </tr>
  </tbody>
</table>

在 header (th) 上添加按钮以在 bootstrap table 中隐藏和显示过滤器控件

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

javascript

jquery

filter

bootstrap-table

bootstrap-4