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

Question

我正在使用数据表，并希望在页面重新加载时保留下拉过滤器和搜索参数，如下面的屏幕截图所示。 但是，如果 window 关闭或用户退出应用程序，我希望清除参数。

在这里，我使用"stateSave": true ，但它仅保留用于搜索输入，这也不一致，因为有时即使用户重新登录，它也会显示旧的搜索关键字而不是重置。

我正在使用以下代码来保留值，但由于 Country 和 State 下拉列表不在数据表 scope 中，因此它们的值不会保留

// 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();
}

Answer 1

请求：如果 window 关闭或用户退出应用程序，我希望清除参数。

默认情况下，DataTables 在最后一次更改后将其 state 保存 2 小时。 它为此使用浏览器的本地存储。 听起来好像您想改用浏览器的 Session 存储。

为此，您可以为超时时间显式设置负值：

"stateDuration": -1

您可以在此处查看更多详细信息。

我不确定这与您的应用程序的特定注销过程有何关系（如果该过程涉及重定向到不同的页面 - 并且这是否足以清除 Session 存储）。 下面的注释可能与此相关。

问题：国家和 State 下拉列表不在数据表 scope 中，它们的值没有保留

对于这种情况——也可能是上面的注销场景——您必须编写自己的 JavaScript 来处理保存和检索您的国家和 state 值。

抱歉，如果我告诉你你已经知道的事情 - 但是有一个简单的 JavaScript API 来处理这个问题：

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

您需要确定存储密钥的命名策略以及要存储的数据的结构。

对于您的 Country 和 State 字段，您可以使用onchange或onselect事件来触发对存储的更新（我假设您已经为这些实现了一些东西）。

对于首次显示表时最初加载这些值，我希望您可以将其添加到现有的“状态恢复”代码中。

了解幕后发生的事情总是有帮助的。 您可以通过浏览器的开发工具（通常为 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();
});

除此之外，我使用评论中提到的相同stateSaveParams和stateLoadParams方法。

当我对国家下拉菜单进行更改时，我可以看到更改反映在本地存储数据中。

当我关闭浏览器选项卡，然后重新打开它时，我保存的 state 将恢复（包括所选国家/地区）。 如果我导航到另一个 URL 然后返回到原来的 URL，也会发生同样的情况。

Answer 2

在探索了解决此问题的几个选项之后，下面的代码有助于实现所需的内容。

"stateSave": true

这将存储state信息，例如分页position，显示长度，过滤和排序。

stateSaveParams: function( settings, data ){
    data.searchCountry = $('#drop_down_country').val()
    data.searchState = $('#drop_down_state').val()
},

stateLoadParams: function( settings, data ){
    $('#drop_down_country').val(data.searchCountry)
    $('#drop_down_state').val(data.searchState)
}

对于注销，清除保存的 state

$('#reset_filter').click(function() {
        var testTable = $('#test-table').DataTable();
        testTable.state.clear();//Clear State
        testTable.destroy();//Destroy
        location.reload();
    });

已经观察到stateSaveParams和stateSave基本上记住了 url 并与它一起保留应用的过滤器

Use Case - User has typed in order #12345 in search input and the url is store.com/orders/index Now if user go to any other page and come back to same url it would retain the search parameters but if you try changing the url 说store.com/orders/它不会保留参数。

执行多个测试用例后，可以得出结论，当用户应用过滤器时， stateSave API 有效，url 保持不变

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

问题描述

2 个解决方案

解决方案1
1 2021-04-06 21:47:15

解决方案2
1 2021-04-21 18:39:02

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

问题描述

2 个解决方案

解决方案1 1 2021-04-06 21:47:15

解决方案2 1 2021-04-21 18:39:02

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

解决方案1
1 2021-04-06 21:47:15

解决方案2
1 2021-04-21 18:39:02