jquery - Rails dataTable Bootstrap 样式不起作用

Question

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

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

View 中的表格:

<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"，这有点帮助，但仍然没有完成这项工作。

Answer 1

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

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

我的应用程序/assets/javascripts/application.js

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

我的应用程序/ Assets /样式表/application.css

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

我的应用程序/assets/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>

请注意，标题和正文中的标签数量正确。还有 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