Question

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

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

在Firefox中，表仍按正确的列排序，并且仍在正确的页面上。如何让Chrome和Edge也采用这种方式？

我知道DataTables有stateSave选项（documentation和example），但问题是当用户浏览网站然后点击链接转到在具有DataTables表的页面中，它也会将它们重新置于该场景中的相同状态。我只希望用户在使用浏览器的后退按钮时重新进入相同状态。

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

Answer 2

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

这种情况发生在以下情况中：

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

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

场景2：用户在状态保存发生后复制网址

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

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

Answer 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> .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>

在用户单击后退按钮时使DataTables保持其状态（没有stateSave选项）

3 个答案: