1

以下に示すように、ビューにレンダリングされたテーブルがあります。

<table border="1", id="pretty" class="tablesorter">
    <thead>
    <tr>
        <th>LeaveID</th>
        <th>Student ID</th>
        <th>Leave Start Date</th>
        <th>Leave End Date</th>
        <th>Leave Reason</th>
        <th>Leave Duration</th>
        <th>Academic Response</th>
        <th>Warden Response</th>
        <th>Leave Status</th>
    </tr>
    </thead>
    <% @leaves.each do |leave| %>
    <tbody>
    <tr>
        <td><%= link_to leave.leave_id_prefix+(leave.leave_id).to_s()+'/'+leave.academic_session, generateReport_path(:id_param => leave.student_id) %><br></td>
        <td><%= leave.student_id %></td>
        <td><%= leave.leave_from %><br></td>
        <td><%= leave.leave_to %><br></td>
        <td><%= leave.leave_reason %><br></td>
        <td><%= leave.leave_duration %></td>
        <td><%= leave.academic_status %></td>
        <td><%= leave.warden_status %></td>
        <td><%= leave.status%></td>
    </tr>
    </tbody>
    <% end %>

</table>

View の JavaScript は次のようになり、レンダリングされたテーブルを dataTable にします。

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

この目的のために、Ryan Bates の Railcasts http://railscasts.com/episodes/340-datatables?view=asciicastをフォローしました。

必要な js ファイルと css ファイルもアプリにダウンロードしました。

しかし、私はいつもこのエラーを受け取ります

    TypeError: Object [object Object] has no method 'dataTable'

どうすればいいですか..どんな洞察も歓迎されます..!

4

4 に答える 4

1

Jquery ファイルが上にあり、次のコードの前に呼び出されていることを確認してください

<script>
   $(document).ready(function(){
       $("#pretty").dataTable();
   });
</script>
于 2013-11-13T12:15:25.540 に答える
0

アップデート：

コードでエラーが見つかりました：

交換

<table border="1", id="pretty" class="tablesorter">

と

<table id="pretty" border="1" class="tablesorter">
于 2013-03-08T11:45:23.480 に答える
0

<tbody>タグはループから外れている必要があります。これにより<tbody>for eachが作成されます<tr>。この場合、dataTable は機能しません。

<tbody>
  <% @leaves.each do |leave| %>
    <tr>
      <td><%= ..... %></td>
      <td><%= ..... %></td>
      <td><%= ..... %></td>
      <td><%= ..... %></td>
      <td><%= ..... %></td>
    </tr>
  <% end %>
</tbody>
于 2014-07-07T09:40:43.613 に答える
0

最初にjqueryスクリプトをロードし、後でdataTables jsスクリプトをロードしてください...

仕分け用

aaSorting 初期化パラメーターを使用すると、情報を表示したい正確な方法でテーブルを取得できます。

 $('#example').dataTable( {
    "aaSorting": [[ 4, "desc" ]]
});

ここでドキュメントを確認できます

于 2013-03-08T11:20:00.180 に答える