jquery-datatables-rails gem doesn't display correctly until page is refreshed

问题

Environment: Ruby 2.0.0, Rails 4.1, Windows 8.1, Devise, jquery-datatables-rails 1.12.2. I am also running Acts-as-tenant, which is a wonderful multi-tenant gem.

I have the datatables gem up and running except for one small problem. When the page is accessed from the index action, it isn't formatted and working. Only a browser refresh fires it up and then it works beautifully. Since it works after the refresh, it seems to me that the gem setup is good.

I have attempted multiple fixes. I minimized the page so that only the table was displayed. I tried both IE and Chrome. This occurs whether or not I have cleared the browser cache and/or restarted the app. I checked the HTML to make sure I didn't see any issues there. I checked the server log to find no differences within it. Nothing I've done seems to change anything.

Here are the before and after views, showing where the page is accessed then refreshed:

First access:

After refresh, all works fine:

The index action is basic, but note it is scoped by Acts-as-tenant:

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

index.html.erb is:

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

The partial _index.html.erb is:

<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>

In Gemfile:

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

In application.js:

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

In datatable.js.coffee:

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

In devices.js.coffee:

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

In application.css.css:

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

In log, which is the same either way:

  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)

All advice appreciated...

回答1:

Try this once:

Add turbolinks gem into the gem file>>

gem 'turbolinks'
gem 'jquery-turbolinks'

And add following into application.js file.

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

Do bundle and restart server.

来源：https://stackoverflow.com/questions/23285111/jquery-datatables-rails-gem-doesnt-display-correctly-until-page-is-refreshed

标签

jquery

ruby-on-rails

datatables

jquery-datatables