提问人：FadeBeatz Official 提问时间：11/5/2023 更新时间：11/5/2023 访问量：32
找不到任何使用“bootstrap-tables”按多列过滤的方法
Can't find any way to filter by multiple columns using "bootstrap-tables"
问：
我最近遇到了“bootstrap-tables”，我喜欢它的设计选项。 一切工作方式与原始数据表版本一样，除了最重要的事情之一：能够同时在多个列中搜索。例如，看一下我的代码，如果我在原始数据表脚本的搜索栏“Action Abenteuer”中输入，它会向我显示具有这两个属性的所有条目。但是当我使用引导版本时，在键入“操作 A”后，它根本没有显示任何结果。此外，当您键入“操作”，然后输入空格键时，它会在 1 秒后自动删除空格。我不明白，这是数据表最好和最重要的功能之一，将其调整为 bootstrap 版本不会那么复杂吗？对于有经验的开发人员..我不是......
我有 2 个脚本，一个使用原始数据表库，第二个使用引导表版本。我花了几天时间试图找到一个解决方案，我真的失去了希望。github repo 上有几个请求，但仍然没有可行的解决方案。有人请帮帮我。
这是我的原始数据表版本：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tabletest</title>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.js"></script>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Titel</th>
<th>Genre</th>
<th>Subgenre</th>
<th>Bewertung</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Action</td>
<td>Psycho</td>
<td>1</td>
</tr>
<tr>
<td>Paul</td>
<td>Comedy</td>
<td>Sport</td>
<td>3</td>
</tr>
<tr>
<td>Mary</td>
<td>Action</td>
<td>Psycho</td>
<td>7</td>
</tr>
<tr>
<td>John</td>
<td>Action</td>
<td>Abenteuer</td>
<td>2</td>
</tr>
<tr>
<td>Helen</td>
<td>Comedy</td>
<td>Sport</td>
<td>6</td>
</tr>
</tbody>
</table>
<script>
$(document).ready( function () {
$('#myTable').DataTable( {
"dom": 'f'
} );
} );
var table = $('#example').DataTable();
</script>
</body>
</html>
#####################################################################################################
这是我的第二个代码，bootstrap-tables 版本：
<!doctype html>
<html lang="en">
<head>
<title>TestTable</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<link href="assets/css/fresh-bootstrap-table.css" rel="stylesheet" />
<link href="assets/css/demo.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,700,300" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="bootstrap_table/src/bootstrap-table.js"></script>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="fresh-table full-color-orange">
<table id="mytable" data-search="true">
<thead>
<th data-field="Titel" data-sortable="true">Name</th>
<th data-field="Genre" data-sortable="true">Genre</th>
<th data-field="Sub" data-sortable="true">Sub</th>
<th data-field="Bewertung" data-sortable="true">Rating</th>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Action</td>
<td>Psycho</td>
<td>3</td>
</tr>
<tr>
<td>Paul</td>
<td>Action</td>
<td>Abenteuer</td>
<td>4</td>
</tr>
<tr>
<td>Mary</td>
<td>Comedy</td>
<td>Abenteuer</td>
<td>5</td>
</tr>
<tr>
<td>John</td>
<td>Action</td>
<td>Abenteuer</td>
<td>1</td>
</tr>
<tr>
<td>Mike</td>
<td>Comedy</td>
<td>Psycho</td>
<td>6</td>
</tr>
<tr>
<td>Helen</td>
<td>Comedy</td>
<td>Abenteuer</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var $table = $('#mytable')
$(function () {
$table.bootstrapTable({
classes: 'table table-hover table-striped',
search: true,
striped: true,
sortable: true,
pageSize: 8,
})
})
</script>
</html>
我尝试过很多不同的东西，我什至不记得它们......似乎没有解决这个问题的方法。
我认为，最初，当作者开始编写“bootstrap-tables”时，原始的 datatables lib 也无法做到这一点。但在最新版本中，它可以搜索多个列。所以也许这只是改变他的代码中的几行问题？还尝试给他发短信，但没有回复。
答： 暂无答案
评论