我创建了一个简单的用户表，其中包含每个用户的国家/地区的列。表下面有两个按钮：第一个过滤器用于过滤表中的行，并隐藏来自欧盟以外国家的用户;第二个被假定为重置（清除）过滤并再次显示所有行。
虽然我已经成功地让第一个按钮工作得很好（使用Bootstrap-table的filterBy方法），但我不知道如何实现第二个按钮。我尝试应用空filter或调用reset和getHiddenRows(true)，但过滤的行仍然是隐藏的。控制台没有JS错误。
我使用的是最新稳定版本的Bootstrap、Bootstrap-table和jQuery。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link href="vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/fortawesome/font-awesome/css/all.min.css" rel="stylesheet">
<link href="vendor/wenzhixin/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<table id="mainTable" data-toggle="table" data-classes="table table-striped">
<thead>
<tr>
<th scope="col" data-field="USER_ID">User ID</th>
<th scope="col" data-field="FIRST_NAME">First name</th>
<th scope="col" data-field="LAST_NAME">Last name</th>
<th scope="col" data-field="EMAIL">Email</th>
<th scope="col" data-field="COUNTRY">Country</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>John</td><td>Smith</td><td>john.smith@example.com</td><td>US</td></tr>
<tr><td>2</td><td>Jane</td><td>Doe</td><td>jane.doe@example.com</td><td>ES</td></tr>
<tr><td>3</td><td>Alice</td><td>Something</td><td>alice@example.com</td><td>FR</td></tr>
<tr><td>4</td><td>Bob</td><td>Jones</td><td>bjonesss@example.com</td><td>UK</td></tr>
</tbody>
</table>
<footer>
<div class="row">
<div class="col">
<button type="button" class="btn btn-primary" id="btnFilterEU">EU countries only</button>
<button type="button" class="btn btn-secondary" id="btnClearFilter">Clear filter</button>
</div>
</div>
</footer>
</div>
<!-- JavaScript -->
<script src="vendor/components/jquery/jquery.min.js"></script>
<script src="vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="vendor/wenzhixin/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script>
$(function() {
$('#btnFilterEU').click(function() {
$('#mainTable').bootstrapTable('filterBy', {}, {
'filterAlgorithm': (row, filters) => { return ['DE', 'FR', 'ES', 'BE' /* ... */].includes(row.COUNTRY); }
});
});
$('#btnClearFilter').click(function() {
// doesn't do anything :(
$('#mainTable').bootstrapTable('filterBy', {});
$('#mainTable').bootstrapTable('getHiddenRows', true);
$('#mainTable').bootstrapTable('refresh');
});
});
</script>
</body>
</html>
1条答案
按热度按时间xoshrz7s1#
我的解决方案是：当参数
filters是空对象{}时，我的定制过滤算法简单地传递所有行。