DataTables分页器仅显示一页时显示许多页面 [英] DataTables Pager Showing Many Pages when there is Only One

问题描述

这很奇怪。
我正在使用带有jQuery 3.3.1和Bootstrap 3.3.7的数据表v1.10.19

This is a weird one. I'm using datatables v1.10.19 with jQuery 3.3.1 and Bootstrap 3.3.7

我的数据表网格配置为显示1000条记录（但是您可以将其更改为2500、5000和全部）。
我的数据库中只有大约60条记录。

My datatables grid is configured to display 1000 records (but you can change it to 2500, 5000 and "all"). I've only got about 60 records in my database.

它正在使用服务器端处理来检索数据。

It is using Server-Side processing to retrieve data.

当网格加载时，寻呼机显示5个按钮和一个椭圆（好像还有更多）。

When the grid loads, the pager displays 5 buttons plus an ellipses (as if there is even more).

甚至更奇怪，如果我更改下拉菜单以显示所有记录，它的作用与我期望的相同，即寻呼机具有1个页面按钮。

And even weirder, if I change the drop-down to display "all" records, it acts as I would expect i.e. the pager has 1 page button.

有效载荷几乎相同：

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

单击第2页时，它确实成功检索到0行的有效负载。
但是在分页器上不应有第2页。

When you click on page 2, it does successfully retrieve a payload with 0 rows. But there shouldn't be a page 2 available on the pager.

数据表的配置对象如下：

The config object for the datatable looks like this:

    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'
        };

我在页面上确实有很多自定义搜索，所以我不得不写很多东西这样的代码：

I do have a bunch of custom searches on the page, so I've had to write a lot of code like this:

$.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.
    }
);

但奇怪的是，全部记录与1000条记录之间的行为不同。

如上所述，选择所有记录有效（仅产生一个页面按钮），但其他所有页面大小均不起作用（即1000、2500、5000）。确实返回了1页的数据，但是我得到了5个页面按钮和一个省略号。

But the odd thing is the different behavior as between "All" records vs 1000 records.
As described above, select "All" records works (resulting in just 1 page button), but none of the other paging sizes work (i.e. 1000, 2500, 5000). The data for the 1 page does return, but I get 5 page buttons and an ellipses.

有什么想法会发生这种情况吗？

Any ideas why this would be happening?

推荐答案

在使用服务器端处理模式时，DataTables期望 draw ， recordsTotal 和 recordsFiltered 是根级元素。考虑将响应更改为以下内容，您可以删除 dataSrc 选项。

When using server-side processing mode DataTables expects draw, recordsTotal and recordsFiltered to be root-level elements. Consider changing your repsonse to the following and you can remove dataSrc option.

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

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

Alternatively you can manipulate the response before passing it to DataTables using function supplied as value for dataSrc option, but I would recommend keep things according to expected format for more readable code.

这篇关于DataTables分页器仅显示一页时显示许多页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！