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)
我正在基于此 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)