Question

我让dataTables在我的rails应用程序中使用该表，但在我安装bootstrap并尝试使用bootstrap设置表之后，该表将不会切换到新的样式。我按照“Twitter Bootstrap 3 Installation”下的步骤进行了操作：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”，这有点帮助，但仍然没有完成这项工作。

Answer 1

也许这个链接可以帮助你，如果没有，请在github上发帖。

https://github.com/rweng/jquery-datatables-rails/issues/73

Answer 2

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

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

我的app / assets / javascripts / application.js

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

我的app / assets / stylesheets / application.css

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

我的app / assets / javascripts / products.js.coffee

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

我的app / 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

Rails dataTable Bootstrap样式不起作用

2 个答案: