jquery - Rails：Rails 3 dataTables TypeError：对象[对象对象]没有方法'dataTable'

Question

我有一个表格，它已在我的视图中呈现，如下所示：

<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 的 Railcast http://railscasts.com/episodes/340-datatables?view=asciicast。

我还将所需的 js 和 css 文件下载到我的应用程序中。

但我总是得到这个错误

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

我应该怎么做..任何见解都将受到欢迎..！

Answer 1

确保您的 Jquery 文件位于上方并在以下代码之前调用

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

Answer 2

确保先加载 jquery 脚本，然后再加载 dataTables js 脚本...

用于分拣

使用 aaSorting 初始化参数，您可以准确地获取表格您希望如何呈现信息。

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

你可以通过这里的文档

Answer 3

你的<tbody>标签应该不在循环中，这会<tbody>为每个创建<tr>，在这种情况下 dataTable 将不起作用。

<tbody>
  <% @leaves.each do |leave| %>
    <tr>
      <td><%= ..... %></td>
      <td><%= ..... %></td>
      <td><%= ..... %></td>
      <td><%= ..... %></td>
      <td><%= ..... %></td>
    </tr>
  <% end %>
</tbody>

Answer 4

更新：

刚刚在您的代码中发现错误：

代替

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

和

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