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

Question

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

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

我添加了 jquery-turbolinks gem。

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

我尝试使用

data-turbolinks=false

使页面正文免受 Turbolinks 的影响。

我尝试将我的脚本按键事件更改为

$(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 相同的问题，而且我仍然无法找到解决方法。

通过将 data-turbolinks="false" 放入表格的 div 中（而不是页面，就像我之前尝试过的那样），我从

DataTables 上的此页面

中获得了一些小进展。对于某些导航来说，这“有效”。我所说的“有效”是指它防止了重复表，但它仍然重新加载整个表。

我还发现了这个令人着迷的讨论，关于 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 协同工作
• 浏览器后退按钮导致某些脚本重新评估

Answer 2

我只是使用了这行代码并且非常适合我

if($('#user_wrapper').length !== 0) return

在创建数据表之前