Rails 4 - 带分页的数据表

Question

我正在尝试在我的 rails 应用程序中获取一个可排序的带有分页的 html 表。但我所做的任何事情都没有任何效果。

我正在使用 rails 4.2.4 和基础 6。

我已经按照所有步骤进行了

这里：https://github.com/rweng/jquery-datatables-rails

这里：https://datatables.net

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

所有这些都使运行它的工作看起来非常简单。

我有以下几点：

宝石文件：

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>

但是无论如何表格都不会改变。 这是当前的表格：

根据我列出的所有链接，我所做的一切都应该神奇地变成这样，带有按钮和分页：

谁能帮忙告诉我我在这里做错了什么？我一直在寻找几个小时来查看示例，但我无法找出为什么这不起作用。

更新：

我直接从他们的网站https://datatables.net/manual/installation 仔细检查了我的步骤，但我仍然看不到我做错了什么。

非常感谢任何帮助。

Answer 1

您需要对代码进行两项更改才能使其正常工作：

1. 您必须从您的<thead> 中删除您的colspan，并且th 和td 的数量应该匹配。

2. <script> 标记应位于页面底部。

Answer 2

http://railscasts.com/episodes/240-search-sort-paginate-with-ajax?autoplay=true 希望它展示了如何在不加载整个文档的情况下对页面进行分页、排序。