尝试通过Tabulator 5的本地存储使用持久筛选器。自包含的示例在4列上使用了4个筛选器。如果所有过滤器都处于活动状态，则只有一行可见。尝试设置4个过滤器并重新加载页面。还显示了制表器持久性使用的本地存储的当前过滤器和内容。
如果网上有这个功能的例子，我会很感激这个链接，因为我找不到一个。
<html>
<head>
<title>Tabulator 5 filter persistence test</title>
<script>
function setFilter(filter) {
if (document.getElementById(filter).checked) {
table.addFilter(filter, "=", 1);
} else {
table.removeFilter(filter, "=", 1);
}
dispDebug();
}
function dispDebug() {
document.getElementById("persist").innerText = localStorage.getItem('tabulator-keeper-filter');
document.getElementById("filterlist").innerText = JSON.stringify(table.getFilters(true));
}
</script>
</head>
<body>
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
<div>
<ol>
<li>Filter checkboxes set filters on each column equal to a value of 1.</li>
<li>Persistence is configured for filter, and using local storage.</li>
<li>Debug data shows the current value of the local storage persistence and the current value of the filters.</li>
<li>Local storage doesn't appear to record the filters in use unless more than 1 filter is active, and you then
remove an active filter.</li>
<li>It doesn't seem possible to get all 4 filters active and saved to local storage</li>
<li>Loading the page with persistence set in local storage doesn't apply the filters defined there.</li>
</div>
Filters: <br>
<label for="f1"><b>F1 = 1</b></label><input type="checkbox" id="f1" onclick="setFilter('f1');"><br>
<label for="f2"><b>F2 = 1</b></label><input type="checkbox" id="f2" onclick="setFilter('f2');"><br>
<label for="f3"><b>F3 = 1</b></label><input type="checkbox" id="f3" onclick="setFilter('f3');"><br>
<label for="f4"><b>F4 = 1</b></label><input type="checkbox" id="f4" onclick="setFilter('f4');"><br><br>
<div style="background-color: rgb(197, 199, 198);">
<b>Debug data</b><br><br>
<label for="persist"><b>tabulator-keeper-filter:</b></label>
<div id="persist" style="background-color: burlywood;"></div><br>
<label for="filterlist"><b>filter list: </b></label>
<div id="filterlist" style="background-color:chocolate"></div><br><br>
</div>
<div id="example-table"></div>
<script>
//define some sample data
var tabledata = [
{ id: 1, f1: "3", f2: 12, f3: 1, f4: 1 },
{ id: 2, f1: "1", f2: 1, f3: 1, f4: 1 },
{ id: 3, f1: "7", f2: 1, f3: 3, f4: 2 },
{ id: 4, f1: "1", f2: 5, f3: 4, f4: 3 },
{ id: 5, f1: "2", f2: 1, f3: 5, f4: 3 },
];
//create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#example-table", {
height: 205,
persistenceID: "keeper",
persistenceMode: "local",
persistence: {
filter: true,
},
data: tabledata, //assign data to table
layout: "fitColumns", //fit columns to width of table (optional)
columns: [ //Define Table Columns
{ title: "F1", field: "f1" },
{ title: "F2", field: "f2" },
{ title: "F3", field: "f3" },
{ title: "F4", field: "f4" },
],
});
dispDebug();
</script>
</body>
</html>
5.0版本中有一个错误破坏了持久过滤器功能，该问题已在其中一个5.1补丁版本中得到解决。
有关修复程序的完整摘要，请查看Release Notes