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

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

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