在存在 Turbolinks 的情况下导航回来时，如何防止 jQuery DataTable 上的重复包装器？
How can I prevent duplicate wrappers on a jQuery DataTable when navigating back in the presence of Turbolinks?
我在新的 Rails 4.2 项目中使用 jQuery DataTables。我有大量结果需要按组、项目和状态进行筛选。选择组会通过应用程序的往返过滤项目选择，项目选择会以相同的方式过滤 table。我将组和项目保存在会话变量中，这样，当用户更改页面，然后单击主 link 返回时，它会记住他们的选择，并将他们带回原来的位置。这一切都如我所愿。
问题是使用浏览器的 后退按钮 从不同的页面返回 table 会导致在 DataTable 周围的重复包装器中（带有搜索框、项目数下拉列表和分页 links）。
我添加了 jquery-turbolinks gem。
我试过 fiddling with event listeners，但我无法使这些想法中的任何一个发挥作用。
我尝试使用 data-turbolinks=false.
使页面正文免于 Turbolinks
我已经尝试将我的脚本键上的事件更改为 $(document).ready() 以外的其他内容，例如 page:load。 None 他们阻止了这一点。
我已经尝试在该特定页面（使用 content_for :head）中使用 data-turbolinks-eval=false 加载免于 Turbolinks 的 DataTable 的所有脚本。
我发现唯一可以防止这种包装器重复发生的方法是简单地从资产中完全删除包含 turbolinks JS 的调用。如果我不知道比我聪明的人认为它应该成为应用程序的一部分，我早就这样做了。我不知道该怎么办。我正在寻找处理此问题的优雅方法。
更新：四年后，我正在使用 Rails 6.1，并且仍在广泛使用 Ag-Grid。我想试试 Rails Hotwire 的新热度，但它似乎是建立在 Turbolinks 上的。因此，我再次尝试让 Ag-Grid 与 Turbolinks 很好地配合使用，但它仍然存在与 DataTables 相同的所有问题，而且我仍然无法找到解决它的方法。
通过 this page on DataTables 的提示，我取得了一些小的进步，将 data-turbolinks="false" 放在 table 的 div 中（不是页面，就像我以前那样尝试过）。对于某些导航，这“有效”。我所说的“有效”是指它阻止了复制 table，但它仍然会重新加载整个 table。
我还发现 fascinating discussion 关于 Basecamp 在 Turbolinks 存在的情况下显然如何处理缓存，但它对 Ag-Grid 没有帮助。
我发现防止 table 元素重复的正确方法是使用 document.addEventListener('DOMContentLoaded', function() {}) 作为我的密钥。它似乎尊重所有使用 links 或 back/forward 按钮进行导航的不同情况，而不重复。但是，我丢失了屏幕上显示的 table 之后的任何行，并且整个 table 需要重新获取和显示数据，无论如何，所以这真的不能解决任何问题.
这是让我对这种情况继续着迷和沮丧的部分。如果我不使用 Tubolinks，这些 JS tables 与浏览器导航按钮配合使用效果很好。我可以前后翻页，none 的数据必须重新加载。如果我确实使用 Turbolinks，并设法防止 table 元素重复，我需要重新加载 table 数据。我显然陷入了 2 个不同的 JS 缓存中间，4 年后，我仍然无法弄清楚如何让它们一起很好地发挥作用。
我的 table 使用以下设置可以正常工作。
对于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>
参考文献：
我在新的 Rails 4.2 项目中使用 jQuery DataTables。我有大量结果需要按组、项目和状态进行筛选。选择组会通过应用程序的往返过滤项目选择，项目选择会以相同的方式过滤 table。我将组和项目保存在会话变量中，这样，当用户更改页面，然后单击主 link 返回时，它会记住他们的选择，并将他们带回原来的位置。这一切都如我所愿。
问题是使用浏览器的 后退按钮 从不同的页面返回 table 会导致在 DataTable 周围的重复包装器中（带有搜索框、项目数下拉列表和分页 links）。
我添加了 jquery-turbolinks gem。
我试过 fiddling with event listeners，但我无法使这些想法中的任何一个发挥作用。
我尝试使用 data-turbolinks=false.
我已经尝试将我的脚本键上的事件更改为 $(document).ready() 以外的其他内容，例如 page:load。 None 他们阻止了这一点。
我已经尝试在该特定页面（使用 content_for :head）中使用 data-turbolinks-eval=false 加载免于 Turbolinks 的 DataTable 的所有脚本。
我发现唯一可以防止这种包装器重复发生的方法是简单地从资产中完全删除包含 turbolinks JS 的调用。如果我不知道比我聪明的人认为它应该成为应用程序的一部分，我早就这样做了。我不知道该怎么办。我正在寻找处理此问题的优雅方法。
更新：四年后，我正在使用 Rails 6.1，并且仍在广泛使用 Ag-Grid。我想试试 Rails Hotwire 的新热度，但它似乎是建立在 Turbolinks 上的。因此，我再次尝试让 Ag-Grid 与 Turbolinks 很好地配合使用，但它仍然存在与 DataTables 相同的所有问题，而且我仍然无法找到解决它的方法。
通过 this page on DataTables 的提示，我取得了一些小的进步，将 data-turbolinks="false" 放在 table 的 div 中（不是页面，就像我以前那样尝试过）。对于某些导航，这“有效”。我所说的“有效”是指它阻止了复制 table，但它仍然会重新加载整个 table。
我还发现 fascinating discussion 关于 Basecamp 在 Turbolinks 存在的情况下显然如何处理缓存，但它对 Ag-Grid 没有帮助。
我发现防止 table 元素重复的正确方法是使用 document.addEventListener('DOMContentLoaded', function() {}) 作为我的密钥。它似乎尊重所有使用 links 或 back/forward 按钮进行导航的不同情况，而不重复。但是，我丢失了屏幕上显示的 table 之后的任何行，并且整个 table 需要重新获取和显示数据，无论如何，所以这真的不能解决任何问题.
这是让我对这种情况继续着迷和沮丧的部分。如果我不使用 Tubolinks，这些 JS tables 与浏览器导航按钮配合使用效果很好。我可以前后翻页，none 的数据必须重新加载。如果我确实使用 Turbolinks，并设法防止 table 元素重复，我需要重新加载 table 数据。我显然陷入了 2 个不同的 JS 缓存中间，4 年后，我仍然无法弄清楚如何让它们一起很好地发挥作用。
我的 table 使用以下设置可以正常工作。
对于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>
参考文献：