Question

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

当我从一个页面（此实例中为home）中单击链接时，会将我发送到包含数据表的页面，这些表格不会显示任何条目或搜索框或分页等。但是，如果我刷新浏览器，页面将完全刷新并进行ajax调用，表格填充正确。

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

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

然而我记得的一件事是我还在使用Turbolinks宝石。我试过禁用它，看看是否能解决我的问题，而且令人惊讶的是，确实如此。

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

Answer 1

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

Answer 2

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

Answer 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

使用Ajax的Rails数据表不能与Turbolink一起使用

3 个答案: