引导表：过滤器控制不起作用答案

【问题标题】：bootstrap table: filter control not working引导表：过滤器控制不起作用
【发布时间】：2021-04-12 15:15:24
【问题描述】：

对于我的引导表，我想使用扩展名Filter Control

服务器端我正在使用 django。

我包括以下css和js：

{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.1/bootstrap-table.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.1/extensions/filter-control/bootstrap-table-filter-control.min.css">

<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.1/bootstrap-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.1/extensions/filter-control/bootstrap-table-filter-control.min.js" ></script>

这里是我的 html 表格：

<table
  id="table"
  data-toggle="table"
  data-pagination="true"
  data-pagination-h-align="left"
  data-pagination-detail-h-align="right"
  data-page-size="25"
  data-page-list="[10, 25, 50, 100, all]"
  data-search="true"
  data-show-columns="true"
  data-filter-control="true"
  data-show-search-clear-button="true"
  data-show-refresh="true"
  data-url="../get_track_list">
  <thead>
    <tr>
      <th data-field="datetime_start" data-formatter="DateFormatter" data-sortable="true" data-switchable="false" data-searchable="false">Date</th>
      <th data-field="name" data-formatter="ActivityLinkFormatter" data-switchable="false">Name</th>
      <th data-field="sport" data-formatter="SportSymbolFormatter" data-sortable="true" data-searchable="false" data-filter-control="select">Sport</th>
    </tr>
  </thead>
</table>

我的 data-url 是来自 django 请求的 json 文件。

生成的表格如下所示：

我在浏览器控制台中没有任何错误。我还看到创建了过滤控制 div 但没有创建下拉字段？

我做错了什么，以至于没有创建data-filter-control="select" 字段？表格是在不使用任何 js 函数的情况下呈现的，在我的 js 文件中只是自定义的data-formatter

【问题讨论】：

标签： javascript django bootstrap-4 bootstrap-table

【解决方案1】：

我已尝试运行您在https://live.bootstrap-table.com/ 中提供的输入，并且过滤器控件仅在删除data-searchable="false"（或将其设置为true）后才起作用。

所以你应该删除data-searchable="false"或将其设置为true

【讨论】：