我在 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",这有点帮助,但仍然没有完成这项工作。
最佳答案
我必须直接通过 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
关于jquery - Rails dataTable Bootstrap 样式不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21104698/