带有 Ajax 的 Rails 数据表不能与 Turbolink 一起使用答案

【问题标题】：Rails Datatables with Ajax not working with Turbolink带有 Ajax 的 Rails 数据表不能与 Turbolink 一起使用
【发布时间】：2014-02-18 02:02:29
【问题描述】：

所以我有一个使用基础的新 Rails 4 应用程序，我今天开始集成 DataTables，并在使用 ajax 调用将其设置为页面后遇到了一个小挫折。

当我从一个页面（在本例中为主页）单击一个链接，该链接将我发送到包含数据表的页面时，表格呈现时没有任何条目或搜索框或分页等。但是，如果我刷新浏览器，页面将完全刷新，并进行 ajax 调用，表格将正确填充。

查看网络流量后，我看到单击链接后响应为 304：未修改。由于没有其他对 JS 和 CSS 等的请求，我假设 JS 没有重新加载并进行正确的 ('#tasks').dataTable({...}) 调用。

另外，需要注意的一点是该表位于部分“tasks_index.html.haml”中。

但我确实记得的一件事是我仍在使用 Turbolinks gem。我尝试禁用它，看看是否能解决我的问题，令人惊讶的是，它确实解决了。

那么什么会导致 Turbolinks 阻止正常的 javascript 在页面上加载呢？有没有办法强制 turbolinks 总是加载某些页面？我什至不使用 Turbolinks 会更好吗？

【问题讨论】：

万一其他人有这个问题，我似乎找到了一种方法，至少可以通过在单个链接上应用 html 标签“data-no-turbolink”来防止 turbolinks包含链接的 div。每当页面上有数据表时，以某种方式禁用涡轮链接会很好，但现在看起来有点复杂，因为我的应用程序仍然很小。
我能够成功修复 turbolinks 问题，而无需求助于 data-no-turbolink。请参阅下面的解决方案。

标签： ruby-on-rails ajax datatables turbolinks

【解决方案1】：

我猜你正在使用$(document).ready 事件来初始化数据表。当您单击链接时使用 turbolinks 时，此事件不会触发，因为 turbolinks 会加载页面本身。所以你应该改用document page:change 事件。见这里：http://guides.rubyonrails.org/working_with_javascript_in_rails.html#page-change-events

【讨论】：

【解决方案2】：

就像lunr说的，你必须把$(document).on "turbolinks:load", ->放在你的.coffee文件中

【讨论】：

【解决方案3】：

我成功使用以下 CoffeeScript 代码使 DataTables 在 Rails 5 / Turbolinks 5 上正常工作。

如果您使用此脚本，您将不再遇到点击浏览器上的后退按钮后 DataTables 包装器重新加载的问题。

请注意，我也在使用turbolinks-compatibility 脚本。

我希望这能帮助像我一样在谷歌搜索/苦苦挣扎的其他人。

TurboLinks 非常适合速度……但它让加载 JavaScript 变得很痛苦。

$(document).on 'turbolinks:load', ->
  tableElementIds = [
    '### TABLE ID HERE ###'
  ]
  i = 0
  while i < tableElementIds.length
    tableElementId = tableElementIds[i]
    if $.isEmptyObject($.find(tableElementId))
      i++
      continue
    table = undefined
    if $.fn.DataTable.isDataTable(tableElementId)
      table = $(tableElementId).DataTable()
    else
      table = $(tableElementId).DataTable(### OPTIONS HERE ###)

    document.addEventListener 'turbolinks:before-cache', ->
      table.destroy()
      return

    i++

  return

【讨论】：