为啥我使用 Datatables 的 Rails 应用程序在我使用后退按钮时无法正确绘制表格，但在我刷新页面时却如此？

Posted 2023-05-07

【中文标题】为啥我使用 Datatables 的 Rails 应用程序在我使用后退按钮时无法正确绘制表格，但在我刷新页面时却如此？

【英文标题】：Why does my rails app that uses Datatables not draw tables correctly when I use the back button, but does when I refresh the page?为什么我使用 Datatables 的 Rails 应用程序在我使用后退按钮时无法正确绘制表格，但在我刷新页面时却如此？

【发布时间】：2020-03-14 03:45:40

【问题描述】：

我已经构建了一个 rails 应用程序，使用 rails 5.2.3 和 ruby​​ 2.6.3 来浏览另一个应用程序的用户日志并编辑其用户及其状态。这是一个简单的应用程序，我使用 rails Datatables 来布置表格。当我输入网站的网址时，例如https://example.com/my_app/logs，它按照它应该的方式显示带有排序、分页等的日志表。如果我移动到我的“关于”页面，然后从那里单击“返回”链接，它会返回到日志索引视图并在浏览器栏中显示相同的 url，但是，表格不是使用 Datatables 布置的。如果我单击浏览器上的重新加载网页，它会正确加载和绘制。关于页面的返回链接是：

<%= link_to 'Back', logs_path %>

logs_path 是 /logs

application.js 有：

//= require_self
//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
//= require jquery.turbolinks
//= require turbolinks
//= require_tree .

logs.coffee 有：

jQuery ->
        $('#posts-table').dataTable()
          sPaginationType: "full_numbers"
          bJQueryUI: true

还有views/logs/index.html.erb 用于表格：

<table id="posts-table" class="display" >

所以我想我想知道，在 logs.coffee 中放置 jQuery Datatable 语句是否意味着执行链接时不包含它？如果不是，那我应该把 dataTable() 语句放在哪里，它应该是什么样子？

【参考方案1】：

由于您使用的是 turbolinks，因此 turbolinks 加载和缓存页面的方式似乎存在问题。

您可以尝试将代码放在“turbolinks:load”侦听器中，如下所示：

$(document).on 'turbolinks:load', () ->
    $('#posts-table').dataTable()
          sPaginationType: "full_numbers"
          bJQueryUI: true

无论如何，你应该考虑一下turbolinks如何处理缓存页面，你可以在this question和this article找到更多关于此事的信息。