引导表过滤器控件选择匹配子集



我使用bootstrap-table和bootstrap-table-filter来过滤表中的结果,但是"select"过滤器正在匹配匹配过滤器的字符串子集。例如,如果我选择(而不是搜索)"燕麦",我将在"goatherd"还有"燕麦"。它显然是在进行字符串搜索,而不是匹配整个值。有办法改变这种行为吗?

html例子:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.2/dist/bootstrap-table.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></head>
<table id="table" data-url="json/data1.json" class="dataframe" data-filter-control="true" data-show-search-clear-button="true" data-show-filter-control-switch="true">
<thead>
<tr style="text-align: right;">
<th data-field="oats_goats" data-filter-control="select">Porridge or milk</th>
</tr>
</thead>
<tbody>[Insert data]</tbody>
</table>

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"</script>
<script src="https://unpkg.com/bootstrap-table@1.20.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.20.1/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
<script>
$(function() {
$('#table').bootstrapTable()
})
</script>

尝试使用列选项filterStrictSearch

https://bootstrap-table.com/docs/extensions/filter-control/filterstrictsearch

<th data-field="oats_goats" data-filter-control="select" data-filter-strict-search="true">Porridge or milk</th>

最新更新