jquery-datatables-rails gem not applying to table

Question

I'm using rails 4.2.4 and after generating a basic product scaffold I cant seem to get the gem jquery-datatables-rails. I'm using the github readme along with the railscast episode to try and get it working with no luck at all.

http://railscasts.com/episodes/340-datatables

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

Gemfile

gem 'jquery-datatables-rails', '~> 3.3.0'

application.js

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

jQuery -> $('.datatable').DataTable();

application.css

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

index.html.erb

<table class="datatable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Price</th>      
    </tr>
  </thead>

  <tbody>
    <% @products.each do |product| %>
      <tr>
        <td><%= product.name %></td>
        <td><%= product.price %></td>
      </tr>
    <% end %>
  </tbody>
</table>

I have tried directly referencing the github repo in my gemfile. The generate install doesn't seem add the requires in properly either way so I have put them in manually.

tet5uo · Accepted Answer · 2016-01-09 01:41:59Z

3

Managed to fix this by putting this script into the view

<script>
  $(document).ready(function() {
    $('.datatable').dataTable();
  } );
</script>

answered Jan 9, 2016 at 1:41

tet5uo

1391 gold badge1 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zia Qamar Over a year ago

Having same issue, but its not working for me. I follow your solution but still did not work

BenKoshy · Accepted Answer · 2018-08-22 08:49:34Z

For future readers, you can do this instead of the accepted answer above. You can dump this straight into your appliation.js file - i don't like the idea of having the scripts in your view as the answer above suggests:

Add to Application.js

$(document).ready(function(){
  $("table[role='datatable']").each(function(){
    $(this).DataTable({
      processing: true      
    });
  });  
})

loads only after the document is ready.
acts on a role element, rather than an id - which can get cumbersome when you wish to apply the same logic on a few tables.

Don't forget to add a role='datatable' to your html table.

Add role='datatable' to your table.
ensure you have a theader element and also a
tbody element

Collectives™ on Stack Overflow

jquery-datatables-rails gem not applying to table

2 Answers 2

1 Comment

Add to Application.js

Don't forget to add a role='datatable' to your html table.

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Add to Application.js

Don't forget to add a role='datatable' to your html table.

Comments

Your Answer

Sign up or log in

Post as a guest

Related