当用户单击后退按钮时,让 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">×</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 选项)的主要内容,如果未能解决你的问题,请参考以下文章