如果我将数据放入表中，数据表将不再适用（Ruby on Rails，RailsCast #340）答案

【问题标题】：Data Tables doesn't apply anymore if I put data in my table (Ruby on Rails, RailsCast #340)如果我将数据放入表中，数据表将不再适用（Ruby on Rails，RailsCast #340）
【发布时间】：2018-02-21 21:32:39
【问题描述】：

我会用两张截图告诉你我的问题。

在这里您可以看到形状良好的空桌子： empty table

当我用数据填充它时，DataTables 不再对外观产生任何影响。 full table

其他页面上的所有表格都有同样的问题。

非常感谢所有尝试解决问题的人！

这是我的代码：宝石文件：

source 'https://rubygems.org'

gem 'rails',                   '5.1.2'
gem 'bcrypt',                  '3.1.11'
gem 'faker',                   '1.7.3'
gem 'carrierwave',             '1.1.0'
gem 'mini_magick',             '4.7.0'
gem 'fog',                     '1.40.0'
gem 'will_paginate',           '3.1.5'
gem 'bootstrap-will_paginate', '1.0.0'
gem 'bootstrap-sass',          '3.3.7'
gem 'puma',                    '3.9.1'
gem 'sass-rails',              '5.0.6'
gem 'uglifier',                '3.2.0'
gem 'coffee-rails',            '4.2.2'
gem 'jquery-rails',            '4.3.1'
gem 'turbolinks',              '5.0.1'
gem 'jbuilder',                '2.7.0'

group :development, :test do
  gem 'sqlite3', '1.3.13'
  gem 'byebug',  '9.0.6', platform: :mri
end

group :development do
  gem 'web-console',           '3.5.1'
  gem 'listen',                '3.0.8'
  gem 'spring',                '2.0.2'
  gem 'spring-watcher-listen', '2.0.1'
end

group :test do
  gem 'rails-controller-testing', '1.0.2'
  gem 'minitest-reporters',       '1.1.14'
  gem 'guard',                    '2.14.1'
  gem 'guard-minitest',           '2.4.6'
end

group :production do
#  gem 'pg', '0.20.0'
# gem 'sqlite3', '1.3.13'
end


# for jquery-datatables-rails

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

# for best_in_place

gem 'best_in_place'


# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

Application.js：

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
// require jquery
// require jquery_ujs
// require bootstrap
// keine Ahnung, ob rails-ujs auch benötigt wird??
// require rails-ujs
// require turbolinks
// require_tree .
//
//= require jquery
//= require jquery.turbolinks
//= require best_in_place
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require bootstrap
//= require turbolinks
//= require_tree .

Application.css：

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 *= require jquery-ui/core
 *= require dataTables/src/demo_table_jui
 */

咖啡脚本：

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
  jQuery ->
    $('#preferences').dataTable
      sPaginationType: "full_numbers"
      bJQueryUI: true

  jQuery ->
    $('.best_in_place').best_in_place()

页面视图：

<% if logged_in? %>
  <div class="center jumbotron">
    <p id="notice"><%= notice %></p>

    <h1>Präferenzen bearbeiten</h1>

  <table  id="preferences" class="display">
      <thead>
        <tr>
          <th>Institut</th>
          <th>Präferenzwert</th>
          <th></th>
          <th></th>
          <th></th>
        </tr>
      </thead>

      <tbody>
        <% @current_user.preferences.each do |preference| %>
          <tr>
            <td><%= (Institute.find_by(id: preference.institute_id)).name  %></td>
              <td><%= preference.preference_value %></td>
              <td><%= link_to 'Bearbeiten', edit_preference_path(preference) %></td>
          </tr>
        <% end %>
      </tbody>
    </table>

    <br>

    <%if @current_user.preferences.empty? %>
      <%= button_to "Präferenzen erstellen", class: "btn btn-primary", :controller => 'preferences', :action =>  'create_all'%>
    <%end%>

  </div>
<% end %>

编辑：也许这些日志文件可以帮助解决问题，首先我在获得空的首选项表时上传日志文件：

Started GET "/preferences" for 127.0.0.1 at 2018-02-22 12:06:33 +0100
Processing by PreferencesController#index as HTML
  Rendering preferences/index.html.erb within layouts/application
  [1m[36mUser Load (0.3ms)[0m  [1m[34mSELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?[0m  [["id", 2], ["LIMIT", 1]]
  [1m[36mPreference Load (0.3ms)[0m  [1m[34mSELECT "preferences".* FROM "preferences" WHERE "preferences"."user_id" = ?[0m  [["user_id", 2]]
  Rendered preferences/index.html.erb within layouts/application (49.2ms)
  Rendered layouts/_rails_default.html.erb (215.1ms)
  Rendered layouts/_shim.html.erb (0.4ms)
  Rendered layouts/_header.html.erb (1.9ms)
  Rendered layouts/_footer.html.erb (0.6ms)
Completed 200 OK in 300ms (Views: 293.2ms | ActiveRecord: 2.8ms)

这里是数据填充偏好表的上传：

  Rendering preferences/index.html.erb within layouts/application
  [1m[36mPreference Load (0.3ms)[0m  [1m[34mSELECT "preferences".* FROM "preferences" WHERE "preferences"."user_id" = ?[0m  [["user_id", 2]]
  [1m[36mInstitute Load (0.6ms)[0m  [1m[34mSELECT  "institutes".* FROM "institutes" WHERE "institutes"."id" = ? LIMIT ?[0m  [["id", 1], ["LIMIT", 1]]
  [1m[36mInstitute Load (0.7ms)[0m  [1m[34mSELECT  "institutes".* FROM "institutes" WHERE "institutes"."id" = ? LIMIT ?[0m  [["id", 2], ["LIMIT", 1]]
  [1m[36mInstitute Load (0.3ms)[0m  [1m[34mSELECT  "institutes".* FROM "institutes" WHERE "institutes"."id" = ? LIMIT ?[0m  [["id", 3], ["LIMIT", 1]]
  [1m[36mInstitute Load (0.2ms)[0m  [1m[34mSELECT  "institutes".* FROM "institutes" WHERE "institutes"."id" = ? LIMIT ?[0m  [["id", 4], ["LIMIT", 1]]
  [1m[36mInstitute Load (0.1ms)[0m  [1m[34mSELECT  "institutes".* FROM "institutes" WHERE "institutes"."id" = ? LIMIT ?[0m  [["id", 5], ["LIMIT", 1]]
  [1m[36mInstitute Load (0.1ms)[0m  [1m[34mSELECT  "institutes".* FROM "institutes" WHERE "institutes"."id" = ? LIMIT ?[0m  [["id", 6], ["LIMIT", 1]]
  [1m[36mInstitute Load (0.2ms)[0m  [1m[34mSELECT  "institutes".* FROM "institutes" WHERE "institutes"."id" = ? LIMIT ?[0m  [["id", 7], ["LIMIT", 1]]
  [1m[36mInstitute Load (0.1ms)[0m  [1m[34mSELECT  "institutes".* FROM "institutes" WHERE "institutes"."id" = ? LIMIT ?[0m  [["id", 8], ["LIMIT", 1]]
  [1m[36mInstitute Load (0.1ms)[0m  [1m[34mSELECT  "institutes".* FROM "institutes" WHERE "institutes"."id" = ? LIMIT ?[0m  [["id", 9], ["LIMIT", 1]]
  [1m[36mInstitute Load (0.1ms)[0m  [1m[34mSELECT  "institutes".* FROM "institutes" WHERE "institutes"."id" = ? LIMIT ?[0m  [["id", 10], ["LIMIT", 1]]
  [1m[36mInstitute Load (0.1ms)[0m  [1m[34mSELECT  "institutes".* FROM "institutes" WHERE "institutes"."id" = ? LIMIT ?[0m  [["id", 11], ["LIMIT", 1]]
  [1m[36mInstitute Load (0.1ms)[0m  [1m[34mSELECT  "institutes".* FROM "institutes" WHERE "institutes"."id" = ? LIMIT ?[0m  [["id", 12], ["LIMIT", 1]]
  [1m[36mInstitute Load (0.1ms)[0m  [1m[34mSELECT  "institutes".* FROM "institutes" WHERE "institutes"."id" = ? LIMIT ?[0m  [["id", 13], ["LIMIT", 1]]
  [1m[36mInstitute Load (5.1ms)[0m  [1m[34mSELECT  "institutes".* FROM "institutes" WHERE "institutes"."id" = ? LIMIT ?[0m  [["id", 14], ["LIMIT", 1]]
  [1m[36mInstitute Load (0.7ms)[0m  [1m[34mSELECT  "institutes".* FROM "institutes" WHERE "institutes"."id" = ? LIMIT ?[0m  [["id", 15], ["LIMIT", 1]]
  [1m[36mInstitute Load (0.1ms)[0m  [1m[34mSELECT  "institutes".* FROM "institutes" WHERE "institutes"."id" = ? LIMIT ?[0m  [["id", 16], ["LIMIT", 1]]
  [1m[36mInstitute Load (0.2ms)[0m  [1m[34mSELECT  "institutes".* FROM "institutes" WHERE "institutes"."id" = ? LIMIT ?[0m  [["id", 17], ["LIMIT", 1]]
  [1m[36mInstitute Load (0.1ms)[0m  [1m[34mSELECT  "institutes".* FROM "institutes" WHERE "institutes"."id" = ? LIMIT ?[0m  [["id", 18], ["LIMIT", 1]]
  [1m[36mInstitute Load (0.2ms)[0m  [1m[34mSELECT  "institutes".* FROM "institutes" WHERE "institutes"."id" = ? LIMIT ?[0m  [["id", 19], ["LIMIT", 1]]
  [1m[36mInstitute Load (0.1ms)[0m  [1m[34mSELECT  "institutes".* FROM "institutes" WHERE "institutes"."id" = ? LIMIT ?[0m  [["id", 20], ["LIMIT", 1]]
  [1m[36mInstitute Load (0.2ms)[0m  [1m[34mSELECT  "institutes".* FROM "institutes" WHERE "institutes"."id" = ? LIMIT ?[0m  [["id", 21], ["LIMIT", 1]]
  Rendered preferences/index.html.erb within layouts/application (112.7ms)
  Rendered layouts/_rails_default.html.erb (375.9ms)
  Rendered layouts/_shim.html.erb (1.3ms)
  Rendered layouts/_header.html.erb (4.9ms)
  Rendered layouts/_footer.html.erb (3.2ms)
Completed 200 OK in 1398ms (Views: 515.5ms | ActiveRecord: 425.1ms)

【问题讨论】：

标签： ruby-on-rails datatables

【解决方案1】：

你可以用 js 代替咖啡来解决这个问题。制作一个名为 z-app.js 的 js 文件，其中：

document.addEventListener("turbolinks:load", function() {
  $('#table-id').DataTable();
});

诀窍是 turbolinks:load，因为您应该只在数据准备好时才加载表。

【讨论】：

不幸的是，这没有帮助。我仍然有同样的症状。我把那个 z-app.js 文件放在 app/assets/javascript 文件夹中。
您应该删除两个空的 th 标签，因为您需要与 td 相同数量的 th （对于您的示例 3）
就是这样！我很高兴，你让我很开心