DataTables 仅在页面刷新时加载

Posted 2023-05-09

【中文标题】DataTables 仅在页面刷新时加载

【英文标题】：DataTables only loads on page refresh

【发布时间】：2015-09-01 19:00:58

【问题描述】：

在我的 Rails 4 应用程序中，如果我从另一个 URL 访问带有 DataTable 的页面，它只会加载纯 html 表。但是，如果我重新加载页面，DataTable 会出现并正常运行。这是我用来运行表格的咖啡脚本。

app/assets/javascript/employees.coffee

jQuery ->

  $('#margin-table1').dataTable().fnDestroy() # prevent duplication error
  $('#margin-table1').dataTable
    'dom' : 'TC<"clear">lftip'
    'bPaginate' : false
    'bInfo' : false
    tableTools: 
      "sSwfPath": "/copy_csv_xls_pdf.swf"
    

app/assets/javascript/application.js

//= require bootstrap
//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
//= require dataTables.colVis
//= require dataTables.tableTools
//= require jquery.purr
//= require dataTables/jquery.dataTables
//= require chartkick
//= require_tree .

app/assets/stylesheets/application.css

*= require_tree .
*= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
*= require dataTables/extras/dataTables.colVis
*= require dataTables/extras/dataTables.tableTools
*= require_self

【问题讨论】：

Similar question here 但没有可靠的答案。我应该在这个问题上悬赏吗？有一些细微的差别（php 与 Rails）。

您在控制台中看到任何错误吗？

@DhirajBodicherla 在重新加载页面以使表格正常工作时，我看到来自 Bootstrap 的 Reference Error: jQuery not defined 错误。使用application.js 和application.css 文件更新帖子。

这个错误似乎是因为 jquery。尝试将 jquery 置于 bootstrap 之上以供初学者使用。

@DhirajBodicherla 我不能因为this error.

【参考方案1】：

好的，我想我理解您的问题足以提供答案。使用 turbolinks 的问题在于，大多数绑定到 document ready 事件的插件和库都会停止工作，因为 turbolinks 会阻止浏览器重新加载页面。有一些技巧可以解决这些问题，但最简单的解决方法是使用jquery.turbolinks。

要使用它，只需将其添加到您的Gemfile

gem 'jquery-turbolinks'

这个到你的assets/javascripts/application.js 文件：

//= require jquery.turbolinks

并重新启动您的服务器，它会正常工作。

【讨论】：

我确实有这种行为，您的解决方案运行良好。

【参考方案2】：

如果在 DOM 加载时调用 .DataTable 方法，而不是：

$(document).ready(function() 
    $('#data-table').DataTable();
 );

使用以下命令等待 turbolink 完成加载（Rails 5）

$(document).on('turbolinks:load', function() 
    $('#data-table').DataTable();
 );