Rails dataTable Bootstrap Styling Not Working

Question

I had dataTables working with the table in my rails application, but after I installed bootstrap and tried to set up the table with bootstrap, the table won't switch to the new styling. I followed the steps laid out here under "Twitter Bootstrap 3 Installation": 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? Thanks for your help.

UPDATE

I added class="table table-bordered table-striped" which helped a bit, but still isn't doing the job.

Answer 1

I had to link the gem directly through github, otherwise it was only the pagination styled with Bootstrap 3 (It is a Rails 4 Application, but also works in Rails 3.2).

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

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

My app/assets/javascripts/products.js.coffee

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

My 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>

Take care, that you have the right number of tags in the thead and tbody. Also the shortcuts for three empty th elements in Rails 4 with

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

will cause a not initatilzed data table.

If you need an example or help, take a look at:
https://github.com/emilde92/datatablestore
http://www.datatables.net/manual/styling/bootstrap
http://getbootstrap.com/css/
http://railscasts.com/episodes/340-datatables