Javascript 让DataTables在用户单击后退按钮时保持其状态（不带stateSave选项）_Javascript_Jquery_Google Chrome_Datatables_Microsoft Edge

Javascript 让DataTables在用户单击后退按钮时保持其状态（不带stateSave选项）

javascript jquery google-chrome datatables

Javascript 让DataTables在用户单击后退按钮时保持其状态（不带stateSave选项）,javascript,jquery,google-chrome,datatables,microsoft-edge,Javascript,Jquery,Google Chrome,Datatables,Microsoft Edge,我在Chrome和Edge中遇到的问题：去按某列对表格进行排序（例如“年龄”）使用表格底部的分页界面转到其他页面之一单击左侧的一个导航链接（例如“常见问题解答”或“下载”）单击浏览器的“后退”按钮，观察表现在已恢复到其原始状态（按“名称”列和第1页排序）在Firefox中，表仍然按正确的列排序，并且仍然在正确的页面上。如何使Chrome和Edge也具有这种行为我知道DataTables有它的stateSave选项（和），但问题是，当用户在站点周围导航，然后单击链接转到包含DataT

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

去

按某列对表格进行排序（例如“年龄”）

使用表格底部的分页界面转到其他页面之一

单击左侧的一个导航链接（例如“常见问题解答”或“下载”）

单击浏览器的“后退”按钮，观察表现在已恢复到其原始状态（按“名称”列和第1页排序）

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

我知道DataTables有它的

stateSave

选项（和），但问题是，当用户在站点周围导航，然后单击链接转到包含DataTables表的页面时，它也会将它们恢复到该场景中的相同状态。我只希望用户在使用浏览器的“后退”按钮时返回到相同的状态。

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

参见示例

尝试以下代码：（概念可能有用）


.modal{text align:center；}
正文{边距：0自动；填充：15px；}
名称
位置
办公室
年龄
开始日期
薪水
名称
位置
办公室
年龄
开始日期
薪水
老虎尼克松
系统架构师
爱丁堡
61
2011/04/25
$320,800
加勒特温特斯
会计
东京
63
2011/07/25
$170,750
阿什顿考克斯
初级技术作者
旧金山
66
2009/01/12
$86,000
塞德里克·凯利
高级Javascript开发人员
爱丁堡
22
2012/03/29
$433,060
佐藤航空
会计
东京
33
2008/11/28
$162,700
布里尔·威廉姆森
集成专家
纽约
61
2012/12/02
$372,000
赫罗德·钱德勒
营业员
旧金山
59
2012/08/06
$137,500
罗娜·戴维森
集成专家
东京
55
2010/10/14
$327,900
科琳赫斯特
Javascript开发人员
旧金山
39
2009/09/15
$205,500
索尼娅·弗罗斯特
软件工程师
爱丁堡
23
2008/12/13
$103,600
杰娜·盖恩斯
办公室经理
伦敦
30
2008/12/19
$90,560
奎因·弗林
支撑导线
爱丁堡
22
2013/03/03
$342,000
查尔德·马歇尔
区域主任
旧金山
36
2008/10/16
$470,600
海莉·肯尼迪
高级市场设计师
伦敦
43
2012/12/18
$313,500
塔蒂亚娜·菲茨帕特里克
区域主任
伦敦
19
2010/03/17
$385,750
迈克尔·席尔瓦
营销设计师
伦敦
66
2012/11/27
$198,500
柏德
首席财务官（CFO）
纽约
64
2010/06/09
$725,000
格洛丽亚·利特尔
系统管理员
纽约
59
2009/04/10
$237,500
布拉德利·格里尔
软件工程师
伦敦
41
2012/10/13
$132,000
戴里奥斯
人事领导
爱丁堡
35
2012/09/26
$217,500
杰内特·考德威尔
开发领导
纽约
30
2011/09/03
$345,000
尤里浆果
首席营销官（CMO）
纽约
40
2009/06/25
$675,000
&时代；
是否要加载原始表？
不
对
$（文档）.ready（函数（）{
var$table=$（'#demoDataTable'）.DataTable({
stateSave：对
});
if（$table.state（））{
$（'myModal'）.modal（'show'）；
}
$（'.yes'）。单击（函数（）{
$table.state.clear（）；
$table.destroy（）；
$（“#解调表”）.DataTable({
stateSave：对
});
});
});

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

出现故障的情况如下：

场景1:在数据表页面的状态保存后，用户按下后退按钮：

用户在网格上做一些事情
状态已保存，触发stateSaveCallback
stateSaveCallback更新“window.location.hash”值
用户然后按下“后退”按钮
页面转到当前URL，但不带哈希
状态已清除

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

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

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

我说这是最好的解决方案，因为您无法控制用户如何导航到网格

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

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

<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> .modal{text-align:center;}
        body{margin: 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" width="100%">
  <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>