【问题标题】:jQuery Data Table Retain Filter and Search parametersjQuery 数据表保留过滤器和搜索参数
【发布时间】:2021-04-06 18:32:36
【问题描述】:

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

这里我使用了"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();
}

【问题讨论】:

    标签: javascript jquery datatables


    【解决方案1】:

    请求:如果窗口关闭或用户退出应用程序,我希望清除参数。

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

    为此,您可以为超时时间显式设置负值:

    "stateDuration": -1
    

    您可以查看更多详情here

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


    问题:国家和州下拉菜单不在数据表范围内,它们的值不会保留

    对于这种情况 - 或许也适用于上述注销场景 - 您必须编写自己的 JavaScript 来处理保存和检索您的国家和州的值。

    很抱歉,如果我告诉你你已经知道的事情 - 但有一个简单的 JavaScript API 可以处理这个:

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

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

    对于您的 Country 和 State 字段,您可以使用 onchangeonselect 事件来触发对您的存储的更新(我假设您已经为这些实现了一些东西)。

    为了在您的表格首次显示时初始加载这些值,我希望您可以将其添加到现有的“状态恢复”代码中。


    了解幕后发生的事情总是很有帮助的。您可以通过浏览器的开发工具(通常为 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 中提到的相同的 stateSaveParamsstateLoadParams 方法。

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

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

    【讨论】:

    • 感谢您的回复,我尝试使用下面的方法来实现预期的效果,但在保持 stateSave: true 的同时仍然无法 100% 工作; 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) }
    • 问题 - 当我转到内页并返回网格时,它不保留输入的搜索关键字注销时,我使用下面来清除搜索元素 dataTable.state.clear() and dataTable.destroy()
    • 我喜欢你的方法——它比我建议使用的 API 更好。但是,我没有看到您看到的相同问题(数据未恢复)。我提供了一个完整的示例,您可以将其复制/粘贴到文本文件中,然后在浏览器中打开。
    • 如果您使用stateSave:true;stateSaveParams,是否需要使用table.state.save();
    • 是的。这是必需的。 stateSaveParams 不知道何时 外部状态值改变。当save() 函数告诉它存储它们时,它只知道如何 存储它们。但是你可以自己看,通过使用我的代码有和没有那行。
    【解决方案2】:

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

    "stateSave": true
    

    这将存储分页位置、显示长度、过滤和排序等状态信息。

    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)
    }
    

    注销时,清除保存状态

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

    已经观察到stateSaveParamsstateSave基本上记住了url并与它一起工作以保留应用的过滤器

    用例 - 用户在搜索输入中按顺序输入 #12345 并且 url 是 store.com/orders/index 现在,如果用户转到任何其他页面并返回相同的 url,它将保留搜索参数,但如果您尝试将 url 更改为 store.com/orders/,它将不会保留参数。

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-12-21
      • 2015-09-26
      • 2012-11-01
      • 1970-01-01
      • 2010-10-24
      • 1970-01-01
      • 1970-01-01
      • 2020-05-16
      相关资源
      最近更新 更多