Драгоценный камень jquery-datatables-rails, не относящийся к таблице

Question

Я использую rails 4.2.4 и после генерации базового продукта я не могу получить gem jquery-datatables-rails. Я использую GitHub Readme вместе с эпизодом Railscast, чтобы попытаться заставить его работать без всякой удачи.

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>

Я попытался напрямую ссылаться на репозиторий github в моем gemfile. Сгенерированная установка, кажется, не добавляет требования в любом случае, поэтому я добавил их вручную.

Answer 1

Удалось исправить это, поместив этот скрипт в представление

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

Answer 2

Для будущих читателей вы можете сделать это вместо принятого ответа выше. Вы можете выбросить это прямо в свой файл appliation.js - мне не нравится идея наличия скриптов в вашем представлении, как показано в ответе выше:

Добавить в Application.js

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

• загружается только после того, как документ готов.
• действует на элемент роли, а не на идентификатор - что может стать громоздким, если вы хотите применить одну и ту же логику к нескольким таблицам.

Не забудьте добавить role='datatable' в вашу HTML-таблицу.

• Добавьте role='datatable' к вашей таблице.
• убедитесь, что у вас есть элемент theader, а также
• элемент тела