在Turbolinks存在的情况下,如何防止jQuery DataTable上的重复 Package 器?

ojsjcaue  于 5个月前  发布在  jQuery
关注(0)|答案(2)|浏览(61)

我在一个新的Rails 4.2项目中使用jQuery DataTables。我有大量的结果需要根据组、项目和状态进行过滤。选择组会过滤项目选择,通过应用程序的往返,项目选择也会以同样的方式过滤表。我将组和项目保存保存在会话变量中,这样当用户更改页面时,然后点击主链接回来,它会记住他们的选择,并让他们回到他们在哪里。这一切的工作就像我打算它。
问题是,使用浏览器的 * 返回按钮 * 从不同的页面返回到表将导致DataTable周围的重复 Package (具有搜索框,项目数标签和分页链接)。
x1c 0d1x的数据
我添加了jquery-turbolinks gem。
我试过fiddling with event listeners,但我不能让这些想法工作。
我试着用data-turbolinks=false使页面的主体不受Turbolinks的影响。
我试过将脚本中的事件改为$(document).ready()以外的事件,比如page:load,但它们都不能阻止这种情况。
我已经尝试在那个特定的页面(使用content_for :head)中加载DataTable的所有脚本,这些脚本都是从Turbolinks中豁免的。
我发现的唯一可以防止这种 Package 器重复发生的方法是简单地从assets中完全删除包含turbolinks JS的调用。如果我不知道比我更聪明的人认为它应该是应用程序的一部分,我已经这样做了。我不知道该怎么做。我正在寻找优雅的方法来处理这个问题。
最新消息:四年后,我使用Rails 6.1,并且仍然广泛使用Ag-Grid。我想尝试Rails Hotwire的新热点,但它似乎是建立在Turbolinks上的。所以我又尝试了一次让Ag-Grid与Turbolinks很好地配合,它仍然有与DataTables相同的问题,我仍然找不到它的前进方向。
我从这个关于DataTables的页面中得到了一些小的进步,通过将data-turbolinks="false"放在表的div中(而不是页面,就像我以前尝试的那样)。对于某些导航,这“工作”。“工作”,我的意思是它防止了复制表,但它仍然重新加载整个表。
我还发现了这个fascinating discussion关于Basecamp显然如何在Turbolinks存在的情况下处理该高速缓存,但它对Ag-Grid没有帮助。
我发现防止表元素重复的正确方法是使用document.addEventListener('DOMContentLoaded', function() {})作为我的键。它似乎尊重使用链接或后退/前进按钮进行导航的所有不同情况,而不重复。然而,我丢失了表中超过屏幕上显示的任何行,整个表需要重新获取和显示数据,无论如何,所以这并不能解决任何问题
这就是这种情况继续吸引我和让我沮丧的部分。如果我不使用Tubolinks,这些JS表与浏览器导航按钮一起工作得很好。我可以向后和向前翻页,没有数据需要重新加载。如果我使用Turbolinks,并设法防止表元素的重复,我需要重新加载表中的数据。很明显,我被夹在两个不同的JS缓存中,4年后,我仍然不知道如何让它们很好地配合在一起。

nxowjjhe

nxowjjhe1#

使用以下设置,我的表可以正常工作。
对于datatable.jsapplication.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>


参考文献:

zzwlnbp8

zzwlnbp82#

我只是简单地使用了这行代码,并在创建数据表之前为我if($('#user_wrapper').length !== 0) return工作得很好。因为浏览器中的来回不断地在 Package 器中添加 Package 器,我发布的代码检查 Package 器的长度,如果它不为零,它会从再次创建数据表中返回。

相关问题