Geek asks and answers

Rails dataTable Bootstrap Styling not working

I had dataTables working with a table in my rails application, but after I installed bootstrap and tried to set up the table using bootstrap, the table will not switch to the new style. I followed the steps outlined here in the “Installing Twitter Bootstrap 3” section: https://github.com/rweng/jquery-datatables-rails

Not sure what I'm doing wrong. Here is my code:

Table in 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 .
 */

What am I doing wrong? Thank you for your help.

UPDATE

I added class = "table-bordered table-striped", which helped a little, but still does not do the job.

+3
source share
2

github, 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 .

My app/assets/stylesheets/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

+1

More articles:


All Articles