Rails 4 - ページテーブル付きのDataTable

Question

私は、私のレールアプリケーションでページネーションを使ってソート可能なhtmlテーブルを取得しようとしています。しかし、私は何も効果がありません。

私はここにすべてのステップ

を踏襲しているレール4.2.4と基礎6

を使用しています：ここhttps://github.com/rweng/jquery-datatables-rails

：ここhttps://datatables.net

：http://datatables.net/dev/foundation.html

これらの人の誰もが、この実行を取得する作業が非常に簡単であるように見えます。

Gemfile：

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

Application.js：私のビューインサイド

//= require jquery 
//= require jquery_ujs 
//= require dataTables/jquery.dataTables 
//= require dataTables/jquery.dataTables.foundation 
//= require jquery-ui 
//= require autocomplete-rails 
//= require foundation 
//= require turbolinks 
//= require_tree . 

$(function(){ 
    $(document).foundation(); 
}); 

私が持っている：

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

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/zf/jq-2.2.3/dt-1.10.12/datatables.min.css"/> 

<script type="text/javascript" src="https://cdn.datatables.net/v/zf/jq-2.2.3/dt-1.10.12/datatables.min.js"></script> 

<table id="jobsTable"> 
    <thead> 
    <tr> 
     <th>Job ID</th> 
     <th>Created On</th> 
     <th>User</th> 
     <th>Company</th> 
     <th>Subcontractor</th> 
     <th>Jobsite</th> 
     <th colspan="2"></th> 
    </tr> 
    </thead> 

    <tbody> 
    <% @jobs.each do |job| %> 
     <tr> 
     <td><%= job.id %> </td> 
     <td><%= job.date.strftime("%I:%M %p, %b %d %Y") %></td> 
     <td><%= job.user.username %></td> 
     <% if job.company %> 
      <td><%= job.company.name %></td> 
     <% else %> 
      <td> N/A </td> 
     <% end %> 
     <% if job.subcontractor %> 
      <td><%= job.subcontractor.name %></td> 
     <% else %> 
      <td> N/A </td> 
     <% end %> 
     <% if job.jobsite %> 
      <td><%= job.jobsite.name %></td> 
     <% else %> 
      <td> N/A </td> 
     <% end %> 
     <td><%= link_to 'Show', job %></td> 
     <!-- if current_user.admin %> --> 
      <!-- <td style="background: lightgray;"> link_to 'Destroy', job, method: :delete, data: { confirm: 'Are you sure?' } %></td> --> 
     <!-- end %> --> 
     </tr> 
    <% end %> 
    </tbody> 
</table> 

しかし、表がない

私には、以下の持っています変わらないma何をするか。 これは、現在のテーブルは次のとおりです。

そして、私が行っているすべてのものを私が記載されているすべてのリンクによると、それは魔法のボタンやページネーションで、このように見えるように変更する必要があります。

誰でも私がここで間違っていることを教えてください。私は例を見て何時間も探していて、なぜこれが動作していないのかを知ることができませんでした。

アップデート：私は彼らのウェブサイトhttps://datatables.net/manual/installationから直接、私はまだ私が間違っているのは何も見ることができないインストールの指示で自分の手順を確認倍増

。

ご協力いただきまして誠にありがとうございます。

Answer 1

あなたはそれを動作させるためにあなたのコードに2つの変更を行う必要があります。

1. あなたの<thead>からあなたcolspanを削除する必要があり、そしてthとtdの数が一致するようにする必要があります。

2. <script>タグは、ページの下部にある必要があります。

Answer 2

http://railscasts.com/episodes/240-search-sort-paginate-with-ajax?autoplay=true ドキュメント全体の読み込みを行わずに、ページをページ付けしてソートする方法を示します。