DataTables 寻呼机在只有一页时显示多页
DataTables Pager Showing Many Pages when there is Only One
这很奇怪。
我将数据表 v1.10.19 与 jQuery 3.3.1 和 Bootstrap 3.3.7
一起使用
我的数据表网格配置为显示 1000 条记录(但您可以将其更改为 2500、5000 和 "all")。
我的数据库中只有大约 60 条记录。
它正在使用服务器端处理来检索数据。
加载网格时,寻呼机显示 5 个按钮和一个省略号(好像还有更多)。
更奇怪的是,如果我将下拉菜单更改为显示 "all" 条记录,它会按照我的预期运行,即寻呼机有 1 个页面按钮。
有效载荷几乎相同:
{
"data": {
"draw": 8,
"recordsTotal": 86,
"recordsFiltered": 66,
"data": [rows of data here]
},
"outcome": {
"opResult": "Success",
"message": ""
}
}
当您点击第 2 页时,它确实成功检索了 0 行的负载。
但是寻呼机上应该没有第 2 页。
数据表的配置对象如下所示:
eventsSvr.buildConfig = function (url) {
return {
"processing": true,
"serverSide": true,
//"paging": true,
"ajax": {
url: url,
type: ajax.requestPOST,
dataSrc: 'data.data' // the path in the JSON structure to the array which will be the rows.
},
"order": [[1, "asc"]],
"lengthMenu": [[1000, 2500, 5000, -1], [1000, 2500, 5000, "All"]],
"initComplete": function (settings, json) {
eventsSvr.searchTextSpan.text('Search').removeClass('search-is-on');
},
"columns": eventsSvr.grid.columns,
"columnDefs": eventsSvr.grid.columnDefs,
dom: 'ltp'
};
我在页面上确实有一堆自定义搜索,所以我不得不写很多这样的代码:
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var picker3 = $(eventsSvr.datePickerInputs[0]).data(icapp.kendoKey);
var picker4 = $(eventsSvr.datePickerInputs[1]).data(icapp.kendoKey);
var rowStartDate = moment(data[3], icapp.date.momentParseFormat).toDate();
var rowEndDate = moment(data[4], icapp.date.momentParseFormat).toDate();
... etc.
}
);
但奇怪的是 "All" 条记录与 1000 条记录之间的不同行为。
如上所述,select "All" 记录有效(仅产生 1 个页面按钮),但其他分页大小的 none 有效(即 1000、2500、5000)。第 1 页的数据确实 return,但我得到 5 个页面按钮和一个省略号。
知道为什么会这样吗?
当使用服务器端处理模式时,DataTables 期望 draw
、recordsTotal
和 recordsFiltered
是根级元素。考虑将您的回复更改为以下内容,您可以删除 dataSrc
选项。
{
"draw": 8,
"recordsTotal": 86,
"recordsFiltered": 66,
"data": [rows of data here],
"outcome": {
"opResult": "Success",
"message": ""
}
}
或者,您可以在使用作为 dataSrc
选项的值提供的函数将响应传递给 DataTables 之前对其进行操作,但我建议按照预期的格式保存内容以获得更易读的代码。
这很奇怪。 我将数据表 v1.10.19 与 jQuery 3.3.1 和 Bootstrap 3.3.7
一起使用我的数据表网格配置为显示 1000 条记录(但您可以将其更改为 2500、5000 和 "all")。 我的数据库中只有大约 60 条记录。
它正在使用服务器端处理来检索数据。
加载网格时,寻呼机显示 5 个按钮和一个省略号(好像还有更多)。
更奇怪的是,如果我将下拉菜单更改为显示 "all" 条记录,它会按照我的预期运行,即寻呼机有 1 个页面按钮。
有效载荷几乎相同:
{
"data": {
"draw": 8,
"recordsTotal": 86,
"recordsFiltered": 66,
"data": [rows of data here]
},
"outcome": {
"opResult": "Success",
"message": ""
}
}
当您点击第 2 页时,它确实成功检索了 0 行的负载。 但是寻呼机上应该没有第 2 页。
数据表的配置对象如下所示:
eventsSvr.buildConfig = function (url) {
return {
"processing": true,
"serverSide": true,
//"paging": true,
"ajax": {
url: url,
type: ajax.requestPOST,
dataSrc: 'data.data' // the path in the JSON structure to the array which will be the rows.
},
"order": [[1, "asc"]],
"lengthMenu": [[1000, 2500, 5000, -1], [1000, 2500, 5000, "All"]],
"initComplete": function (settings, json) {
eventsSvr.searchTextSpan.text('Search').removeClass('search-is-on');
},
"columns": eventsSvr.grid.columns,
"columnDefs": eventsSvr.grid.columnDefs,
dom: 'ltp'
};
我在页面上确实有一堆自定义搜索,所以我不得不写很多这样的代码:
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var picker3 = $(eventsSvr.datePickerInputs[0]).data(icapp.kendoKey);
var picker4 = $(eventsSvr.datePickerInputs[1]).data(icapp.kendoKey);
var rowStartDate = moment(data[3], icapp.date.momentParseFormat).toDate();
var rowEndDate = moment(data[4], icapp.date.momentParseFormat).toDate();
... etc.
}
);
但奇怪的是 "All" 条记录与 1000 条记录之间的不同行为。
如上所述,select "All" 记录有效(仅产生 1 个页面按钮),但其他分页大小的 none 有效(即 1000、2500、5000)。第 1 页的数据确实 return,但我得到 5 个页面按钮和一个省略号。
知道为什么会这样吗?
当使用服务器端处理模式时,DataTables 期望 draw
、recordsTotal
和 recordsFiltered
是根级元素。考虑将您的回复更改为以下内容,您可以删除 dataSrc
选项。
{
"draw": 8,
"recordsTotal": 86,
"recordsFiltered": 66,
"data": [rows of data here],
"outcome": {
"opResult": "Success",
"message": ""
}
}
或者,您可以在使用作为 dataSrc
选项的值提供的函数将响应传递给 DataTables 之前对其进行操作,但我建议按照预期的格式保存内容以获得更易读的代码。