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

Pagination issue with jquery DataTables and will_paginate gem on Rails 5.2

我正在基于此 tutorial 在我的应用程序中实施 jQuery DataTables。我可以使用打包的 Gem,但我需要了解和了解下面的内容。

我的目的是显示 ValuesList 中的 Values分页)。

结果符合目的,但我仍然有一个问题:当显示26条记录的数据集时,按10条记录的页面显示,只有第一页包含数据。单击“下一步”按钮 returns 空白页(但正确计算丢失的记录:“显示 11 到 20 个条目,共 26 个条目”)。

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

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

点击下一步按钮后,下一个查询是:

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

具有 25 个记录的同一个测试会生成以下请求:

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

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

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


这是我的代码:

Gem文件提取

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 对于值列表 class

      <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>

终于发现start参数不是return页码,而是行号。我用以下内容更新了我的代码:

# 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)