在存在 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.我有大量的结果需要根据组、项目和状态进行过滤.选择组过滤项目选择，通过应用程序的往返，项目选择以相同的方式过滤表.我保存组&项目在会话变量中，以便当用户更改页面，然后单击主链接返回时，它会记住他们的选择，并让他们回到原来的位置.这一切都如我所愿.

I'm using jQuery DataTables in a new Rails 4.2 project. I've got a large number of results that need to be filtered on group, project, and status. Choosing the group filters the project selection, via a roundtrip through the application, and the project selection filters the table the same way. I save the group & project in session variables so that, when the user changes pages, then clicks the main link to come back, it will remember their selection, and get them back to where they were. This all works like I intend it to.

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

The problem is that using the browser's back button to get back to the table from a different page will result in a duplicate wrapper (with search box, number-of-items dropdown, and pagination links) around the DataTable.

我添加了 jquery-turbolinks gem.

I've added the jquery-turbolinks gem.

我试过摆弄事件听众，但我不能让这些想法奏效.

I've tried fiddling with event listeners, but I can't make either of those ideas work.

我尝试使用 data-turbolinks=false 使页面主体免于 Turbolinks.

I've tried making the body of the page exempted from Turbolinks with data-turbolinks=false.

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

I've tried changing the event my script(s) key on to something other than $(document).ready(), like page:load. None of them prevent this.

我已经尝试加载 DataTable 的所有脚本，以在该特定页面中使用 data-turbolinks-eval=false 免除 Turbolinks(使用 content_for :head).

I've tried loading all the scripts for the DataTable as exempted from Turbolinks with data-turbolinks-eval=false in that specific page (with content_for :head).

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

The only thing I've found that will prevent this wrapper duplication from happening is to simply remove the call to include the turbolinks JS from the assets entirely. And I'd have done this already if I didn't know that smarter people than me think it ought to be a part of the application. I don't know what to do. I'm looking for the elegant way to handle this.

更新:四年后，我使用 Rails 6.1，并且仍在广泛使用 Ag-Grid.我想尝试 Rails 的新热点 Hotwire，但它似乎建立在涡轮链接.因此，我再次尝试让 Ag-Grid 与 Turbolinks 完美配合，但它仍然存在与 DataTables 相同的问题，我仍然无法找到前进的方向.

UPDATE: Four years later, I'm using Rails 6.1, and still using Ag-Grid extensively. I'd like to try the new hotness from Rails Hotwire, but it seems to be built on Turbolinks. So I've taken another pass at getting Ag-Grid to play nicely with Turbolinks, and it still has all the same problems as DataTables, and I STILL can't figure out a way forward with it.

我从 DataTables 上的这个页面，通过将 data-turbolinks="false" 放在表格的 div 中(不是页面，就像我之前尝试过的那样).对于某些导航，这有效".通过工作"，我的意思是它阻止了复制表，但它仍然重新加载整个表.

I got some small progress with a tip from this page on DataTables, by putting data-turbolinks="false" in the div for the table (not the page, like I had previously tried). For some navigation, this "worked." By "worked," I mean that it prevented duplicating the table, but it still reloads the whole table.

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

I also found this fascinating discussion about how Basecamp apparently deals with the cache in the presence of Turbolinks, but it didn't help for Ag-Grid.

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

I've discovered that the right incantation to prevent duplication of table elements is to use document.addEventListener('DOMContentLoaded', function() {}) as my key. It seems to respect all the different cases of using links or back/forward buttons for navigation, without duplicating. However, I'm losing any rows in the table past what is showing on the screen, and the whole table needs to have data fetched and displayed again, anyway, so that really doesn't solve anything.

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

That's the part that continues to fascinate and frustrate me about this situation. If I DON'T use Tubolinks, these JS tables work GREAT with the browser navigation buttons. I can page back and forward, and none of the data has to get reloaded. If I DO use Turbolinks, and manage to prevent the duplication of the table elements, I need to reload the table data. I'm clearly getting caught in the middle of 2 different JS caches, and after 4 years, I still can't figure out how to get them to play nicely together.

推荐答案

我的表在以下设置下按预期工作.

My table works as I expect with the following settings.

对于 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 协同工作
• 浏览器后退按钮导致一些脚本重新评估

这篇关于在存在 Turbolinks 的情况下导航回时，如何防止 jQuery DataTable 上的重复包装器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！