在 Turbolinks 存在的情况下导航回来时，如何防止 jQuery DataTable 上出现重复的包装器？

Question

我在新的 Rails 4.2 项目中使用 jQuery DataTables。我有大量结果需要按组、项目和状态进行过滤。选择组会通过应用程序的往返来过滤项目选择，项目选择也会以相同的方式过滤表。我将组和项目保存在会话变量中，以便当用户更改页面，然后单击主链接返回时，它将记住他们的选择，并将它们返回到原来的位置。这一切都按照我的意愿进行。

问题在于，使用浏览器的后退按钮从不同页面返回表将导致 DataTable 周围出现重复的包装器（带有搜索框、项目数下拉列表和分页链接）。

我添加了 jquery-turbolinks gem。

我尝试过摆弄事件侦听器，但我无法使这些想法发挥作用。

我尝试过使页面正文免受 Turbolinks 的影响data-turbolinks=false。

我尝试将我的脚本键更改为除 之外的事件$(document).ready()，例如page:load。他们都没有阻止这一点。

我尝试加载data-turbolinks-eval=false该特定页面中不受 Turbolinks 约束的 DataTable 的所有脚本（带有content_for :head）。

我发现唯一可以防止这种包装器重复发生的方法是简单地删除从资产中完全包含turbolinks JS 的调用。如果我不知道比我更聪明的人认为它应该成为应用程序的一部分，我早就这样做了。我不知道该怎么办。我正在寻找一种优雅的方式来处理这个问题。

更新：四年后，我正在使用 Rails 6.1，并且仍然广泛使用 Ag-Grid。我想尝试一下 Rails Hotwire的新功能，但它似乎是建立在 Turbolinks 上的。因此，我再次尝试让 Ag-Grid 与 Turbolinks 很好地配合，但它仍然存在与 DataTables 相同的问题，而且我仍然找不到解决办法。

通过放入表格的 div（而不是页面，就像我之前尝试过的那样） ，我通过DataTables 上的此页面的提示取得了一些小进展。data-turbolinks="false"对于某些导航来说，这“有效”。我所说的“有效”是指它防止了重复表，但它仍然重新加载整个表。

我还发现了关于 Basecamp 在存在 Turbolinks 的情况下如何处理缓存的有趣讨论，但这对 Ag-Grid 没有帮助。

我发现防止表元素重复的正确咒语是用作document.addEventListener('DOMContentLoaded', function() {})我的密钥。它似乎尊重使用链接或后退/前进按钮进行导航的所有不同情况，而不重复。但是，我丢失了表中超出屏幕上显示内容的任何行，并且整个表需要再次获取和显示数据，所以这实际上并不能解决任何问题。

这就是这种情况继续让我着迷和沮丧的部分。如果我不使用 Tubolinks，这些 JS 表与浏览器导航按钮配合得很好。我可以前后翻页，并且不需要重新加载任何数据。如果我确实使用 Turbolinks，并设法防止表元素重复，我需要重新加载表数据。我显然陷入了 2 个不同的 JS 缓存中间，四年后，我仍然不知道如何让它们很好地协同工作。

Answer 1

我的桌子按照我的预期使用以下设置工作。

对于datatable.js或application.js.

var dataTable = null

document.addEventListener("turbolinks:before-cache", function() {
  if (dataTable !== null) {
   dataTable.destroy()
   dataTable = null
  }
})

供观赏。

<table id="my-table">
  ..
</table>

<script>
  dataTable = $('#my-table').DataTable({
    stateSave: true
  })
</script>

参考：

• Turbolinks 5 和 DataTables 协同工作
• 浏览器后退按钮导致某些脚本重新评估