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

Question

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

问题是，使用浏览器的后退按钮从不同页面返回表格将导致重复的包装器(带有搜索框、数量-数据表周围的项目下拉菜单和分页链接。

我添加了 jquery-turbolinks gem。

我已经尝试过fiddling with event listeners ，但我无法让这些想法发挥作用。

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

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

我尝试在该特定页面中使用 data-turbolinks-eval=false 加载不受 Turbolinks 约束的 DataTable 的所有脚本(使用 content_for :head) .

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

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

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

我还发现了这个fascinating discussion关于 Basecamp 显然如何在存在 Turbolinks 的情况下处理缓存，但它对 Ag-Grid 没有帮助。

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

对于这种情况，这就是让我继续着迷和沮丧的部分。如果我不使用 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 and DataTables working together in harmony
• browser back button causes some scripts to reevaluate