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 期望 drawrecordsTotalrecordsFiltered 是根级元素。考虑将您的回复更改为以下内容,您可以删除 dataSrc 选项。

{
    "draw": 8,
    "recordsTotal": 86,
    "recordsFiltered": 66,
    "data": [rows of data here],
    "outcome": {
        "opResult": "Success",
        "message": ""
    }
}

或者,您可以在使用作为 dataSrc 选项的值提供的函数将响应传递给 DataTables 之前对其进行操作,但我建议按照预期的格式保存内容以获得更易读的代码。