jquery-datatables-rails gem 在页面刷新之前无法正确显示

Posted 2023-05-09

【中文标题】jquery-datatables-rails gem 在页面刷新之前无法正确显示

【英文标题】：jquery-datatables-rails gem doesn't display correctly until page is refreshed

【发布时间】：2014-06-10 16:41:14

【问题描述】：

环境：Ruby 2.0.0、Rails 4.1、Windows 8.1、Devise、jquery-datatables-rails 1.12.2。我也在运行 Acts-as-tenant，这是一个很棒的多租户宝石。

除了一个小问题外，我已经启动并运行了数据表 gem。当从索引操作访问页面时，它没有被格式化和工作。只有浏览器刷新才能启动它，然后它就可以很好地工作。由于刷新后可以正常工作，因此在我看来 gem 设置很好。

我尝试了多个修复。我最小化了页面，以便只显示表格。我尝试了 IE 和 Chrome。无论我是否已清除浏览器缓存和/或重新启动应用程序，都会发生这种情况。我检查了 html 以确保我没有看到任何问题。我检查了服务器日志，发现其中没有任何差异。我所做的一切似乎都没有改变。

以下是之前和之后的视图，显示页面被访问然后刷新的位置：

首次访问：

刷新后一切正常：

索引操作是基本的，但请注意它的范围是作为租户的：

  def index
    @devices = Device.all
    @roles = Role.all
  end

index.html.erb 是：

<div class="row">
  <%= render partial: 'index', layout: 'layouts/sf_label', locals:  title: 'List Devices'  %>
</div>

部分 _index.html.erb 是：

<div class="span8">
  <table id="datatable">
    <thead>
    <tr>
      <th>Device</th>
      <th>Created</th>
      <th>Role</th>
    </tr>
    </thead>
    <tbody>
    <% @devices.each do |device| %>
        <tr>
          <td><%= link_to device.name, edit_device_path(device.id) %></td>
          <td><%= device.created_at.to_date %></td>
          <td><%= device.roles.first.name.titleize unless device.roles.first.nil? %></td>
        </tr>
    <% end %>
    </tbody>
  </table>
</div>

在 Gemfile 中：

gem 'jquery-datatables-rails', github: 'rweng/jquery-datatables-rails'
gem 'jquery-ui-rails'

在 application.js 中：

//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap

在 datatable.js.coffee 中：

jQuery ->
  $('#datatable').dataTable()

在 devices.js.coffee 中：

$('.datatable').dataTable(
  "sPaginationType": "bootstrap"
);

在 application.css.css 中：

 *= require dataTables/jquery.dataTables
 *= require dataTables/jquery.dataTables.bootstrap

在日志中，两种方式都一样：

  Rendered devices/_index.html.erb (253.2ms)
  Rendered devices/index.html.erb within layouts/application (254.2ms)
  Rendered layouts/_shim.html.erb (1.0ms)
  CACHE (0.0ms)  SELECT COUNT(*) FROM "roles" INNER JOIN "devices_roles" ON "roles"."id" = "devices_roles"."role_id" WHERE "devices_roles"."device_id" = $1 AND (((roles.name = 'admin') AND (roles.resource_type IS NULL) AND (roles.resource_id IS NULL)))  [["device_id", 51]]
  Rendered layouts/_navigation_links.html.erb (3.0ms)
  Rendered layouts/_navigation.html.erb (4.0ms)
  Rendered layouts/_messages.html.erb (1.0ms)
Completed 200 OK in 290ms (Views: 248.2ms | ActiveRecord: 36.0ms)

感谢所有建议...

【参考方案1】：

试试这个：

将 turbolinks gem 添加到 gem 文件中>>

gem 'turbolinks'
gem 'jquery-turbolinks'

并将以下内容添加到 application.js 文件中。

//= require jquery.turbolinks
//= require turbolinks

捆绑并重新启动服务器。

【讨论】：

完美！谢谢！我应该补充一点，我在那里有 turbolinks，我只需要在两个位置添加 jquery 版本，FWIW。

只是出于好奇，似乎通过阅读文档，我可以选择删除 turbolinks 或添加 jquery-turbolinks。 turbolinks 破坏了一些 jquery 功能，而 jquery-turbolinks 解决了这些问题。很有趣。

是的..如果您在代码中使用过多的 js 和 jquery 插件，那么两者都很好..

@Mayank 该死的聪明伙伴！