轨道 ： 轨道 3 个数据表类型错误： 对象 [对象对象] 没有方法'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>

和视图中的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' 

我该怎么做呢?欢迎提出任何见解!

Answer 1

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

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

Answer 2

UPDATE:

刚刚在你的代码中发现了错误:

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

与

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

Answer 3

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

进行排序

使用aaSorting初始化参数，您可以得到您想要显示信息的表。

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

你可以查看这里的文档

Answer 4

你的<tbody>标签应该跳出循环，这为每个<tr>创建<tbody>，在这种情况下，dataTable将无法工作。

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