在有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.
问题是使用浏览器的 后退按钮 来取回从不同的页面到表格将导致DataTable周围的重复包装器（带有搜索框，项目数下拉列表和分页链接）。
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.
我试过用使Turbolinks免除页面正文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的所有脚本加载为Turbolinks免除 data-turbolinks-eval = false 在该特定页面中（ 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.
推荐答案
我的表格按预期工作，具有以下设置。
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 and DataTables working together in harmony
- browser back button causes some scripts to reevaluate
这篇关于在有Turbolinks的情况下导航回来时，如何防止jQuery DataTable上的重复包装？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
