Rails 4 - 带分页的数据表

Posted 2023-05-09

【中文标题】Rails 4 - 带分页的数据表

【英文标题】：Rails 4 - DataTable with pagination

【发布时间】：2017-03-01 21:32:03

【问题描述】：

我正在尝试在我的 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 仔细检查了我的步骤，但我仍然看不到我做错了什么。

非常感谢任何帮助。

【参考方案1】：

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

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

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

【讨论】：

如果您在为 DataTable 安装 gem 之后执行了此 rails generate jquery:datatables:install 命令，那么您可以从 cdn 文件中删除将包含 dataTable lib 的 标签。

非常感谢。那成功了。我相信我唯一真正的问题是th 和td 标签不匹配。现在一切看起来都很棒。

欢迎您，如果您执行了rails generate jquery:datatables:install 命令，然后将 css 和 js 文件包含到 application.js 和 application.css 中，则无需手动将 lib 文件加载到视图文件中。

【参考方案2】：

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

【讨论】：

欢迎来到 Stack Overflow，Ishtaque05。请在您的答案中提供代码，而不仅仅是一些链接。