Rails 5.2 上 jquery DataTables 和 will_paginate gem 的分页问题

Posted 2023-05-07

【中文标题】Rails 5.2 上 jquery DataTables 和 will_paginate gem 的分页问题

【英文标题】：Pagination issue with jquery DataTables and will_paginate gem on Rails 5.2

【发布时间】：2021-02-12 04:41:40

【问题描述】：

我正在基于tutorial 在我的应用程序中实现 jQuery DataTables。我可以使用打包好的 Gem，但我需要了解并了解其底层内容。

我的目的是以用户可以使用列表的方式（搜索、排序、分页）显示 ValuesList 中的 Values。

结果符合目的，但我仍然有一个问题：在显示 26 条记录的数据集时，按 10 条记录的页面显示，只有第一页包含数据。单击“下一步”按钮会返回一个空白页面（但会正确计算丢失的记录：“显示 26 个条目中的 11 到 20 个”）。

查日志，发现第一次显示页面时，向数据库发送的请求是：

SELECT "values".* 
       FROM "values" 
       WHERE (values_list_id = 938) 
       ORDER BY code asc 
       LIMIT $1 OFFSET $2  [["LIMIT", 10], ["OFFSET", 0]]

点击下一步按钮后，下一个查询是：

SELECT "values".* 
       FROM "values" 
       WHERE (values_list_id = 938) 
       ORDER BY code asc 
       LIMIT $1 OFFSET $2  [["LIMIT", 10], ["OFFSET", 100]]

相同的测试与 25 条记录 par page 生成以下请求：

SELECT "values".* 
       FROM "values" 
       WHERE (values_list_id = 938) 
       ORDER BY code asc 
       LIMIT $1 OFFSET $2  [["LIMIT", 25], ["OFFSET", 625]]

看起来分页功能计算了 LIMIT^2 的偏移量！ 但是当我在几个地方使用 will_paginate gem 时，我知道它也可以正常工作。

那么这是从哪里来的，我该如何解决呢？

---

这是我的代码：

Gemfile 提取

gem 'will_paginate', '~> 3.1'

application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require d3
//= require nested_form_fields
//= require jQueryRotate
//= require js.cookie
//= require select2/select2
//= require DataTables/datatables
//= require_tree .

application.scss

@import "oblique-4.1.1/styles/css/frutiger.css";
@import "oblique-4.1.1/styles/css/oblique-material.css";
@import "oblique-4.1.1/styles/css/oblique-core.css";
@import "oblique-4.1.1/styles/css/oblique-inline.css";
@import "oblique-4.1.1/styles/css/oblique-components.css";
@import "oblique-4.1.1/styles/css/oblique-utilities.css";
@import "bootstrap-4.1/modal.css";    
@import "DataTables/datatables.css";    
@import "select2/select2.css";    
@import "sis-prototype";

values_lists_controller.rb 提取

  def get_child_values
    @child_values = Value.where('values_list_id = ?', @values_list.id).datatable_filter(params['search']['value'], params['columns'])
    values_total = Value.where('values_list_id = ?', @values_list.id).count
    values_count = @child_values.count

    @child_values = @child_values.datatable_order(params['order']['0']['column'].to_i, params['order']['0']['dir'])
    @child_values = @child_values.paginate(page: (params['start'].to_i + 1), per_page: params['length'])

    render json:  data: @child_values,
                   draw: params['draw'].to_i,
                   recordsTotal: values_total,
                   recordsFiltered: values_count 
  end

show.html.erb 用于 ValuesList 类

      <div class="tab-pane active" id="child-values">

        <div class="mat-button-group">
          <%= link_to values_list_path(@values_list, format: "csv"), class: "mat-flat-button mat-button-base mat-primary" do %>
            <span class="fa fa-file-excel"></span>
            Export to CSV
          <% end %>
          <%= link_to new_values_list_values_import_path(@values_list), class: "mat-flat-button mat-button-base mat-primary" do %>
            <span class="fa fa-file-alt" %></span>
            <%= t('ImportValues') %>
          <% end %>
        </div>

        <table class="table table-align-top" id="childTable1">
        </table>

      </div>
    </div>
  </div>

</section>

<script>
  $(document).ready( function () 
    $('#childTable1').DataTable(
      ajax: '<%= url_for(@values_list) %>/get_child_values',
      serverSide: true,
      columns: [
      title: 'Code', data: 'code',
      title: 'Name', data: 'name',
      title: 'Id', data: 'id'
      ]
    );
   );
</script>

【参考方案1】：

终于发现start参数返回的不是页码，而是行号。我用以下内容更新了我的代码：

# Calculate next page
page_number = (params['start'].to_i / params['length'].to_i) + 1
@child_values = @child_values.datatable_order(params['order']['0']['column'].to_i, params['order']['0']['dir'])
@child_values = @child_values.paginate(page: page_number, per_page: params['length'].to_i)