当用户单击后退按钮时,让 DataTables 保持其状态(没有 stateSave 选项)

Posted

技术标签:

【中文标题】当用户单击后退按钮时,让 DataTables 保持其状态(没有 stateSave 选项)【英文标题】:Getting DataTables to keep its state when the user clicks the back button (without the stateSave option) 【发布时间】:2017-03-25 20:37:12 【问题描述】:

我在 Chrome 和 Edge 中遇到的问题:

    转到https://datatables.net/examples/basic_init/zero_configuration.html 按某列对表格进行排序(例如“年龄”) 使用表格底部的分页界面转到其他页面之一 点击左侧的导航链接之一(例如“常见问题解答”或“下载”) 单击浏览器的后退按钮,观察表格现在恢复到其原始状态(按“名称”列和第 1 页排序)

在 Firefox 中,表格仍然按正确的列排序,并且仍然在正确的页面上。如何让 Chrome 和 Edge 也有这种行为?

我知道 DataTables 有其 stateSave 选项(documentation 和 example),但问题是当用户在站点中导航然后单击链接以转到包含 DataTables 表的页面,它也会使它们在那种情况下恢复到相同的状态。如果用户使用浏览器的后退按钮,我只希望用户回到相同的状态。

【问题讨论】:

您可以弹出询问用户是否希望保持当前状态或重新加载表格。 Here a fiddle... 【参考方案1】:

基于此post,您可以在单击指向包含表格的页面的链接时清除保存的状态

参见示例here

$(document).ready(function() 
    $('#example').DataTable( 
        "paging":   true,
        "ordering": true,
        "info":     false,
        stateSave: true
     );
 );

$(".table_link").on("click", function()
  $('#example').DataTable().state.clear();
);

【讨论】:

我说这是最好的解决方案,因为除了您网站上的按钮/链接之外,您无法控制用户导航到页面的方式。 检查一下,您似乎可以检测用户是否使用后退按钮到达:***.com/questions/829046/…。如果链接的解决方案成立,您可以在用户通过其他方式到达时选择性地清除状态【参考方案2】:

好吧,有一个疯狂的想法可能适用于此。如果您使用“stateSaveCallback”设置 URL 哈希,这将在浏览器历史记录中添加一个项目。然后您可以在页面加载时检查哈希值。如果散列不存在,则清除 DataTable 上的状态缓存。

在以下情况下会出现问题:

场景一:用户在数据表页面状态保存后按下返回键:

用户在网格上做某事。 状态被保存触发 stateSaveCallback stateSaveCallback 更新“window.location.hash”值。 然后用户按下“返回”按钮 页面转到当前 URL,但没有哈希。 状态已清除。

场景 2: 用户在保存状态后复制 URL

用户在网格上做某事。 状态被保存触发 stateSaveCallback stateSaveCallback 更新“window.location.hash”值。 用户手动复制包含哈希值的 URL。 用户使用这个复制的值直接导航到数据表页面。 以前的状态不会被清除。

但在提供的所有其他场景中,只要您不在导航链接中包含哈希码,这将可靠地检测用户是否使用后退按钮导航到网格,因为它将是它自己的历史项目。

【讨论】:

【参考方案3】:

试试这个代码:(这个概念可能有帮助)

<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<style> .modaltext-align:center;
        bodymargin: 0 auto;padding:15px;</style>
</head>

<body>
<div class="container-fluid">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <table id="demoDataTable" class="display" cellspacing="0" >
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>59</td>
      <td>2012/08/06</td>
      <td>$137,500</td>
    </tr>
    <tr>
      <td>Rhona Davidson</td>
      <td>Integration Specialist</td>
      <td>Tokyo</td>
      <td>55</td>
      <td>2010/10/14</td>
      <td>$327,900</td>
    </tr>
    <tr>
      <td>Colleen Hurst</td>
      <td>Javascript Developer</td>
      <td>San Francisco</td>
      <td>39</td>
      <td>2009/09/15</td>
      <td>$205,500</td>
    </tr>
    <tr>
      <td>Sonya Frost</td>
      <td>Software Engineer</td>
      <td>Edinburgh</td>
      <td>23</td>
      <td>2008/12/13</td>
      <td>$103,600</td>
    </tr>
    <tr>
      <td>Jena Gaines</td>
      <td>Office Manager</td>
      <td>London</td>
      <td>30</td>
      <td>2008/12/19</td>
      <td>$90,560</td>
    </tr>
    <tr>
      <td>Quinn Flynn</td>
      <td>Support Lead</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2013/03/03</td>
      <td>$342,000</td>
    </tr>
    <tr>
      <td>Charde Marshall</td>
      <td>Regional Director</td>
      <td>San Francisco</td>
      <td>36</td>
      <td>2008/10/16</td>
      <td>$470,600</td>
    </tr>
    <tr>
      <td>Haley Kennedy</td>
      <td>Senior Marketing Designer</td>
      <td>London</td>
      <td>43</td>
      <td>2012/12/18</td>
      <td>$313,500</td>
    </tr>
    <tr>
      <td>Tatyana Fitzpatrick</td>
      <td>Regional Director</td>
      <td>London</td>
      <td>19</td>
      <td>2010/03/17</td>
      <td>$385,750</td>
    </tr>
    <tr>
      <td>Michael Silva</td>
      <td>Marketing Designer</td>
      <td>London</td>
      <td>66</td>
      <td>2012/11/27</td>
      <td>$198,500</td>
    </tr>
    <tr>
      <td>Paul Byrd</td>
      <td>Chief Financial Officer (CFO)</td>
      <td>New York</td>
      <td>64</td>
      <td>2010/06/09</td>
      <td>$725,000</td>
    </tr>
    <tr>
      <td>Gloria Little</td>
      <td>Systems Administrator</td>
      <td>New York</td>
      <td>59</td>
      <td>2009/04/10</td>
      <td>$237,500</td>
    </tr>
    <tr>
      <td>Bradley Greer</td>
      <td>Software Engineer</td>
      <td>London</td>
      <td>41</td>
      <td>2012/10/13</td>
      <td>$132,000</td>
    </tr>
    <tr>
      <td>Dai Rios</td>
      <td>Personnel Lead</td>
      <td>Edinburgh</td>
      <td>35</td>
      <td>2012/09/26</td>
      <td>$217,500</td>
    </tr>
    <tr>
      <td>Jenette Caldwell</td>
      <td>Development Lead</td>
      <td>New York</td>
      <td>30</td>
      <td>2011/09/03</td>
      <td>$345,000</td>
    </tr>
    <tr>
      <td>Yuri Berry</td>
      <td>Chief Marketing Officer (CMO)</td>
      <td>New York</td>
      <td>40</td>
      <td>2009/06/25</td>
      <td>$675,000</td>
    </tr>
  </tbody>
</table>
</div></div>
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Do you want to load the original table?</h4>
      </div>
      <div class="modal-body">
        <button type="button" class="no btn btn-default" data-dismiss="modal">No</button>
        <button type="button" class="yes btn btn-primary" data-dismiss="modal">Yes</button>
      </div>
    </div>
  </div>
</div>

</body>
<script>
$(document).ready(function() 
  var $table = $('#demoDataTable').DataTable(
    stateSave: true
  );

  if ($table.state()) 
    $('#myModal').modal('show');
  

  $('.yes').click(function() 
    $table.state.clear();
    $table.destroy();
    $('#demoDataTable').DataTable(
      stateSave: true
    );
  );
);
</script>
</html>

【讨论】:

以上是关于当用户单击后退按钮时,让 DataTables 保持其状态(没有 stateSave 选项)的主要内容,如果未能解决你的问题,请参考以下文章

按下后退按钮时如何保留可滚动区域的滚动位置?

如何为后退按钮保留 Web 表单内容

单击浏览器的后退按钮时如何销毁会话

单击后退按钮时如何正确显示 ajax 填充页面

单击后退按钮但不离开页面时防止自动滚动?

如何检查是否单击后退按钮