如何在 Bootstrap-table 上使用 data-filter-control-container 选项？答案

【问题标题】：How to use the data-filter-control-container option on Bootstrap-table?如何在 Bootstrap-table 上使用 data-filter-control-container 选项？
【发布时间】：2020-06-23 00:47:30
【问题描述】：

我正在尝试从 filterControl 设置新功能，但也许我不明白它是如何工作的。文档说明：

设置为例如#filter 以允许在具有 id 过滤器的元素中自定义输入过滤器。每个过滤器元素（输入或选择）必须具有以下 id bootstrap-table-filter-control-（必须替换为定义的 Field 名称）。

我的代码示例在https://live.bootstrap-table.com/code/joicy/3593

【问题讨论】：

标签： filter bootstrap-4 custom-controls bootstrap-table

【解决方案1】：

您必须为 data-filter-control-container 属性的值设置选择器。在您的代码示例中，您应该尝试使用“#filter”而不是“true”。像那样： data-filter-control-container="#filter">

【讨论】：

【解决方案2】：

我创建了https://jsfiddle.net/SaeedYasin/k8vqcs9m/41/ 来展示如何使用 data-filter-control-container 属性。这是 HTML，

<div class="container">
  <h3>Bootstrap-table</h3>
  <div id="filter">
    <select class="form-control bootstrap-table-filter-control-name">
      <option value=""></option>
    </select>
  </div>

  <table 
    id="table" 
    data-toggle="table" 
    data-toolbar="#toolbar" 
    data-filter-control="true" 
    data-filter-control-container="#filter"
  >
    <thead>
      <tr>
        <th data-field="id" data-filter-control="select">Id</th>
        <th data-field="name" data-filter-control="select">Name</th>
        <th data-field="city" data-filter-control="select">City</th>
      </tr>
    </thead>
  </table>
</div>

在此示例中，name 列获取过滤器控件容器，但您也可以将其更改为任何其他列。因此，例如，您可以将 bootstrap-table-filter-control-name 改为 bootstrap-table-filter-control-city 以使其适用于“城市”列，而不是 bootstrap-table-filter-control-name。此外，您也可以为选项添加初始值，而不是当前的空字符串。

【讨论】：