请求:如果窗口关闭或用户退出应用程序,我希望清除参数。
默认情况下,DataTables 在最后一次更改后将其状态保存 2 小时。它为此使用浏览器的本地存储。听起来好像您想改用浏览器的 Session Storage。
为此,您可以为超时时间显式设置负值:
"stateDuration": -1
您可以查看更多详情here。
我不确定这与您的应用程序的特定注销过程有何关系(如果该过程涉及重定向到不同的页面 - 并且这足以清除会话存储)。下面的注释可能与此相关。
问题:国家和州下拉菜单不在数据表范围内,它们的值不会保留
对于这种情况 - 或许也适用于上述注销场景 - 您必须编写自己的 JavaScript 来处理保存和检索您的国家和州的值。
很抱歉,如果我告诉你你已经知道的事情 - 但有一个简单的 JavaScript API 可以处理这个:
https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
您需要确定存储密钥的命名策略,以及要存储的数据的结构。
对于您的 Country 和 State 字段,您可以使用 onchange 或 onselect 事件来触发对您的存储的更新(我假设您已经为这些实现了一些东西)。
为了在您的表格首次显示时初始加载这些值,我希望您可以将其添加到现有的“状态恢复”代码中。
了解幕后发生的事情总是很有帮助的。您可以通过浏览器的开发工具(通常为 F12)访问本地和会话存储。您还可以通过这种方式查看 DataTables 如何存储其数据。
更新
基于原始海报中的 cmets:我喜欢将外部值集成到 DataTables 保存的数据集中的替代方法(而且可能更好!)。
当我使用下面的 cmets 中提到的方法时,我在保存和检索这些数据方面没有问题。
如果有帮助,这里是一个完整的独立示例(除了它没有任何“注销”功能):
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<select name="country" id="drop_down_country">
<option value="Argentina">Argentina</option>
<option value="Belgium">Belgium</option>
<option value="Canada">Canada</option>
</select>
<br><br>
<table id="example" class="display dataTable cell-border" style="width:100%">
</table>
</div>
<script>
var dataSet = [
{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"office": "Tokyo"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"office": "London"
},
{
"id": "3",
"name": "Ashton Cox",
"position": "Junior Technical Author",
"office": "New York"
}
];
$(document).ready(function() {
$( "#drop_down_country" ).change(function() {
table.state.save();
});
var table = $('#example').DataTable( {
data: dataSet,
stateSave: true,
stateSaveParams: function( settings, data ) {
data.searchCountry = $('#drop_down_country').val();
},
stateLoadParams: function( settings, data ) {
$('#drop_down_country').val(data.searchCountry);
},
columns: [
{ title: "ID", data: "id" },
{ title: "Name", data: "name" },
{ title: "Office", data: "office" },
{ title: "Position", data: "position" }
]
} );
} );
</script>
</body>
</html>
在这个例子中,我只有一个下拉菜单(国家),带有一个相关的事件监听器:
$( "#drop_down_country" ).change(function() {
table.state.save();
});
除此之外,我使用与 cmets 中提到的相同的 stateSaveParams 和 stateLoadParams 方法。
当我对国家下拉菜单进行更改时,我可以看到更改反映在本地存储数据中。
当我关闭浏览器选项卡,然后重新打开它时,我保存的状态会恢复(包括所选国家/地区)。如果我导航到另一个 URL,然后返回到原始 URL,也会发生同样的情况。