[英]bootstrap table: filter control not working
在我的引导程序表中,我想使用扩展过滤器控件
服务器端我使用的是 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>
我的数据 url 是来自 django 请求的 json 文件。
我在浏览器控制台中没有任何错误。 我还看到创建了过滤器控制 div 但没有创建下拉字段?
我做错了什么,以至于没有创建data-filter-control="select"
字段? 该表是在不使用任何 js 函数的情况下呈现的,在我的 js 文件中只是自定义data-formatter
我已尝试运行您在https://live.bootstrap-table.com/
中提供的输入,并且过滤器控件仅在删除data-searchable="false"
(或将其设置为true
)后才起作用。
因此,您应该删除data-searchable="false"
或将其设置为true
就我而言,过滤器控制由于数据高度而无法正常工作。 我删除了数据高度并且它有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.