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

Question

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

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

在 Firefox 中，该表仍按正确的列排序，并且仍在正确的页面上。我怎样才能使 Chrome 和 Edge 也以这种方式运行？

我知道 DataTables 有其 stateSave 选项（ 文档 和 示例），但问题是当用户浏览网站然后单击链接转到包含 DataTables 表的页面时，它将在那种情况下也将它们放回相同的状态。我只希望用户在使用浏览器的后退按钮时回到相同的状态。

原文由 Nick 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据这篇 文章，您可以在单击将您带到带有表格的页面的链接时清除已保存的状态

看 这里的 例子

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

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

原文由 Dex Dave 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

在以下情况下会出现这种情况：

场景一： 用户在数据表页面保存状态后按下返回键：

• 用户在网格上做某事。
• 状态被保存触发 stateSaveCallback
• stateSaveCallback 更新“window.location.hash”值。
• 然后用户按下“后退”按钮
• 页面转到当前 URL，除非没有哈希。
• 状态被清除。

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

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

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

原文由 Adrian 发布，翻译遵循 CC BY-SA 3.0 许可协议