在用户单击后退按钮时使DataTables保持其状态(没有stateSave选项)
我在Chrome和Edge中遇到的问题:
- 转到https://datatables.net/examples/basic_init/zero_configuration.html
- 按某些列对表格进行排序(例如“年龄”)
- 使用表格底部的分页界面转到其他页面之一
- 点击左侧的导航链接之一(例如“常见问题解答”或“下载”)
- 单击浏览器的后退按钮,观察表现在已恢复到原始状态(按“名称”列和第1页排序)
在Firefox中,表仍按正确的列排序,并且仍在正确的页面上。 如何让Chrome和Edge也采用这种方式?
我知道DataTables有它的stateSave
选项( 文档和示例 ),但问题是当用户在站点周围导航然后单击链接转到具有DataTables表的页面时,它会将它们放回到同一个页面中在这种情况下的状态。 我只希望用户在使用浏览器的后退按钮时回到相同的状态。
根据这篇文章,您可以在单击指向带有表格页面的链接时清除已保存的状态
看这里的例子
$(document).ready(function() { $('#example').DataTable( { "paging": true, "ordering": true, "info": false, stateSave: true } ); } ); $(".table_link").on("click", function(){ $('#example').DataTable().state.clear(); });
好吧有一种疯狂的想法可能适用于此。 如果使用“stateSaveCallback”设置URL哈希,则会将项目添加到浏览器历史记录中。 然后,您可以在页面加载时检查哈希值。 如果哈希不存在,则清除DataTable上的状态缓存。
这种情况发生在以下情况中:
场景1:用户在数据表页面上保存状态后按下按钮:
- 用户在网格上做某事。
- 状态被保存,触发stateSaveCallback
- stateSaveCallback更新“window.location.hash”值。
- 然后用户按下“后退”按钮
- 页面转到当前URL,但没有哈希。
- 国家被清除。
场景2:用户在状态保存发生后复制URL
- 用户在网格上做某事。
- 状态被保存,触发stateSaveCallback
- stateSaveCallback更新“window.location.hash”值。
- 用户手动复制包含哈希值的URL。
- 用户使用此复制的值直接导航到数据表页面。
- 以前的状态不会被清除。
但是在提供的所有其他方案中,只要您不在导航链接上包含哈希代码,这将可靠地检测用户是否使用后退按钮导航到网格,因为它将是它自己的历史记录项。
试试这段代码:(概念可能有帮助)
Name Position Office Age Start date Salary Name Position Office Age Start date Salary Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800 Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750 Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500 Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900 Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500 Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600 Jena Gaines Office Manager London 30 2008/12/19 $90,560 Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000 Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600 Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500 Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750 Michael Silva Marketing Designer London 66 2012/11/27 $198,500 Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000 Gloria Little Systems Administrator New York 59 2009/04/10 $237,500 Bradley Greer Software Engineer London 41 2012/10/13 $132,000 Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500 Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000 Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000