Rails dataTable引导样式不起作用答案

【问题标题】：Rails dataTable Bootstrap Styling Not WorkingRails dataTable引导样式不起作用
【发布时间】：2014-01-14 01:42:31
【问题描述】：

我有 dataTables 在我的 rails 应用程序中处理表格，但在我安装引导程序并尝试使用引导程序设置表格后，表格不会切换到新样式。我按照“Twitter Bootstrap 3 安装”下的步骤进行操作：https://github.com/rweng/jquery-datatables-rails

不知道我做错了什么。这是我的代码：

视图中的表格：

<table id="products">
    <thead>
      <tr>
        <th>Name</th>
        <th>Price</th>
      </tr>
    </thead>

    <tbody>
        <tr>
          <td>Something</td>
          <td>Something</td>
        </tr>
        <tr>
          <td>Something</td>
          <td>Something</td>
        </tr>
        <tr>
          <td>Something</td>
          <td>Something</td>
        </tr>
    </tbody>
</table>

Application.js

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap3
//= require turbolinks
//= require_tree .

$(document).ready(function() 
    { 
        $("#products").dataTable({
            sPaginationType: "bootstrap"
        });
    } 
);

Application.css

/*
 *= require_self
 *= require dataTables/jquery.dataTables.bootstrap3
 *= require_tree .
 */

我做错了什么？感谢您的帮助。

更新

我添加了 class="table table-bordered table-striped" 这有点帮助，但仍然没有完成这项工作。

【问题讨论】：

也许这个链接可以帮助你，如果没有，请在 github 上发帖到。 github.com/rweng/jquery-datatables-rails/issues/73

标签： jquery ruby-on-rails-4 datatables jquery-datatables twitter-bootstrap-rails

【解决方案1】：

我必须直接通过 github 链接 gem，否则它只是使用 Bootstrap 3 样式的分页（它是一个 Rails 4 应用程序，但也适用于 Rails 3.2）。

gem 'jquery-datatables-rails', git: 'git://github.com/rweng/jquery-datatables-rails.git'

我的应用程序/资产/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap3
//= require_tree .

我的应用/资产/样式表/application.css

/*
*= require dataTables/jquery.dataTables
*= require dataTables/jquery.dataTables.bootstrap3
*= require_tree .
*= require_self
*/

我的应用/资产/javascripts/products.js.coffee

jQuery ->
   $('#datatable_products').dataTable
     sPaginationType: "bootstrap"

我的应用程序/views/products/index.html.erb

<table id="datatable_products" class="table table-striped">
 <thead>
  <tr>
   <th>Name</th>
   <th>Category</th>
   <th>Price</th>
   <th>Stock</th>
   <th></th>
   <th></th>
   <th></th>
  </tr>
 </thead>

 <tbody>
  <% @products.each do |product| %>
    <tr>
      <td><%= product.name %></td>
      <td><%= product.category %></td>
      <td><%= product.price %></td>
      <td><%= product.stock %></td>
      <td><%= link_to 'Show', product %></td>
      <td><%= link_to 'Edit', edit_product_path(product) %></td>
      <td><%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you   sure?' } %>  </td>
   </tr>
  <% end %>
 </tbody>
</table>

请注意，您在 thead 和 tbody 中有正确数量的标签。 Rails 4中三个空元素的快捷方式

  <th colspan="3"></th>

将导致未初始化的数据表。

如果您需要示例或帮助，请查看：
https://github.com/emilde92/datatablestore
http://www.datatables.net/manual/styling/bootstrap
http://getbootstrap.com/css/
http://railscasts.com/episodes/340-datatables

【讨论】：