CODEWITHSUNDEEP
datatablesdatatables-1.10
onefootswill
onefootswill

Reputation: 4097

DataTables Pager Showing Many Pages when there is Only One

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

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.

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

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.

The payloads are pretty much identical:

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

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

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?

Upvotes: 0

Views: 899

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58890

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": ""
    }
}

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.

Upvotes: 2

Related Questions