jquery - 如何将当前页码和长度发送到服务器
问题描述
我遵循 DataTable 文档并按如下方式实现,数据被重新渲染但分页无法正常工作。
当我单击 dataTable 右下角的页码和更改页面长度时的实际pageSize (table.page.info().length) 时,如何获取实际的pageNumber (table.page.info().page)在ajax调用之前数据表的左上角。
示例 1:当我点击页码“1”时,我得到 -
Page Number 0 Page Size 10
但应该是
Page Number 1 Page Size 10
示例 2:当我将页面长度“10”更改为“25”时,我得到 -
Page Number 0 Page Size 10
但应该是
Page Number 0 Page Size 25
这意味着我落后了一步,请帮助....
这是我的html
<table id="allScholarshipResult" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Id</th>
<th>Scholarship Year</th>
<th>Scholarship Level</th>
<th>Total Candidate</th>
<th>Boy</th>
<th>Girl</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Id</th>
<th>Scholarship Year</th>
<th>Scholarship Level</th>
<th>Total Candidate</th>
<th>Boy</th>
<th>Girl</th>
</tr>
</tfoot>
</table>
这是js
$(document).ready(function() {
var url = 'all';
var pageNumber;
var pageSize;
var table = $('#allScholarshipResult').DataTable({
"processing": true,
"serverSide": true,
"paging": true,
"searching": { "regex": true },
ajax: function ( data, callback, settings ) {
$.ajax({
url: url,
type: 'GET',
data: {
pageNumber: pageNumber,
pageSize: pageSize
},
success: function( response, textStatus, jQxhr ){
pageNumber = table.page.info().page;
pageSize= table.page.info().length;
console.log('Page Number '+pageNumber + ' Page Size ' + pageSize);
callback({
data: response.responseObject.data,
recordsTotal: response.responseObject.recordsTotal,
recordsFiltered: response.responseObject.recordsFiltered
});
},
error: function( jqXhr, textStatus, errorThrown ){
}
});
},
columns: [
{ data: "id" },
{ data: "examYear" },
{ data: "scholarshipLevelId" },
{ data: "candidateTotal" },
{ data: "candidateBoy" },
{ data: "candidateGirl" },
]
});
} );
从 API 返回的响应
{
"recordsTotal": 5,
"recordsFiltered": 5,
"data": [
{
"id": 76,
"examYear": 2020,
"scholarshipLevelId": 1,
"candidateTotal": 0,
"candidateBoy": 0,
"candidateGirl": 0
},
{
"id": 75,
"examYear": 2020,
"scholarshipLevelId": 1,
"candidateTotal": 0,
"candidateBoy": 0,
"candidateGirl": 0
},
{
"id": 74,
"examYear": 2019,
"scholarshipLevelId": 2,
"candidateTotal": 0,
"candidateBoy": 0,
"candidateGirl": 0
},
{
"id": 73,
"examYear": 2019,
"scholarshipLevelId": 1,
"candidateTotal": 0,
"candidateBoy": 0,
"candidateGirl": 0
},
{
"id": 72,
"examYear": 2020,
"scholarshipLevelId": 2,
"candidateTotal": 0,
"candidateBoy": 0,
"candidateGirl": 0
}
]
}
解决方案
第一次,您将在服务器中获得的pageNumber
和的值将是undefined。从服务器获得响应后,您将设置 和 的值到表的页码和当前时间点的页长将分别为0和10。pageSize
pageNumber
pageSize
现在,每当您点击任何页面时,比如说5,您将在服务器中获得0而不是4。
我建议您使用settings
在 ajax 函数中传递的对象:
$(document).ready(function() {
var url = 'all';
var table = $('#allScholarshipResult').DataTable({
"processing": true,
"serverSide": true,
"paging": true,
"searching": { "regex": true },
ajax: function (data, callback, settings) {
var api = new $.fn.dataTable.Api(settings); // <--- create new api object using settings object
$.ajax({
url: url,
type: 'GET',
data: {
pageNumber: api.page(), // <---- get page number
pageSize: api.page.len(), //<--- get page length
},
});
},
});
});
推荐阅读
- marko - 在marko中使用`getEls`的正确方法?
- angular - Angular 6 多语言和 .NET Core 2.1
- css - 谷歌地图与 CSS 过渡
- go - 模型没有主键
- python - 在 Flask 中使用 Pickle
- sql - `Publisher(pub_name, pub_branch)` 中的 `Publisher()` 是什么?
- visual-studio - Visual Studio 2017 隐藏项目根文件
- mongodb - 如何连接到MongoDB中的集合
- regex - sed -i '/$(command 1)/$(command 2)/' myHtmlFile ? 使用 sed 和 awk 进行内联编辑
- c++ - C++ 在模板类中使用抽象类