gpt4 book ai didi

javascript - jQuery 数据表保留过滤器和搜索参数

转载 作者:行者123 更新时间:2023-12-04 07:51:09 25 4
gpt4 key购买 nike

我正在使用数据表并希望在页面重新加载时保留下拉过滤器和搜索参数,如下面的屏幕截图所示。但是,我希望在窗口关闭或用户退出应用程序时清除参数。
这里我用过"stateSave": true但它只保留搜索输入,而且也不一致,因为有时即使用户重新登录,它也会显示旧的搜索关键字而不是重置。
我使用下面的代码来保留值,但由于国家和州下拉列表不在数据表范围内,因此不会保留它们的值

// Restore state
var state = table.state.loaded();
if ( state ) {
table.columns().eq( 0 ).each( function ( colIdx ) {
var colSearch = state.columns['colIdx'].search;
if ( colSearch.search ) {
$('input', $('.filters th')[colIdx]).val( colSearch.search );
}
});
table.draw();
}

最佳答案

请求:我希望在窗口关闭或用户退出应用程序时清除参数。
默认情况下,DataTables 在上次更改后将其状态保存 2 小时。它为此使用浏览器的本地存储。听起来好像您想改用浏览器的 session 存储。
为此,您可以明确地为超时时间设置一个负值:

"stateDuration": -1
您可以查看更多详情 here .
我不确定这与您的应用程序的特定注销过程有什么关系(如果该过程涉及重定向到不同的页面 - 并且这足以清除 session 存储)。下面的注释可能与此相关。

问题:国家和州下拉列表不在数据表范围内,它们的值不会保留
对于这种情况 - 也许还有上面的注销场景 - 您必须编写自己的 JavaScript 来处理保存和检索您的国家和州值。
如果我告诉您您已经知道的内容,我深表歉意 - 但有一个简单的 JavaScript API 可以处理这个问题:
https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
您需要决定存储 key 的命名策略以及要存储的数据的结构。
对于您的国家和州字段,您可以使用 onchangeonselect触发存储更新的事件(我假设您已经为这些实现了一些东西)。
为了在首次显示表时初始加载这些值,我希望您可以将其添加到现有的“状态恢复”代码中。

了解幕后发生的事情总是有帮助的。您可以通过浏览器的开发工具(通常为 F12)访问本地和 session 存储。您还可以通过这种方式查看 DataTables 如何存储其数据。

更新
基于来自原始海报的评论:我喜欢将外部值集成到 DataTables 保存的数据集的替代方法(可能更好!)。
当我使用下面评论中提到的方法时,保存和检索这些数据没有问题。
如果有帮助,这里是一个完整的独立示例(除非它没有任何“注销”功能):
<!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();
});
除此之外,我使用相同的 stateSaveParamsstateLoadParams评论中提到的方法。
当我更改国家/地区下拉菜单时,我可以看到本地存储数据中反射(reflect)的更改。
当我关闭浏览器选项卡,然后重新打开它时,我保存的状态会恢复(包括所选国家/地区)。如果我导航到另一个 URL 然后返回到原始 URL,也会发生同样的情况。

关于javascript - jQuery 数据表保留过滤器和搜索参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66974492/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com