Error with Remote Pagination in Tabulator 5.0

Question

My tabulator 5.0 table works fine. But when I attempt to use remote pagination it no longer works at all.

var table = new Tabulator("#account-tran-detail-table", {
    pagination:true,
    paginationMode:"remote", //if this line is commented out then it works fine without pagination
    paginationSize: 12,
    dataSendParams:{
        page: "page",
        size: "page_size",
    },
    dataReceiveParams:{
        last_page:"total_pages",
    } ,
    ajaxResponse:function(url, params, response){
        return response.results; // return the array of table items
    },
});

table.on("tableBuilt", function(){
    table.setColumns(columns);
});

function generateReport () {
    table.clearData();
    var columns = [
            {title:"id", field:"id", headerFilter:false, visible:false, download:true},
            {title:"name", field:"name", headerFilter:false, visible:false, download:true},
        ];

    var gender = "m";
    var url = "/api/v1/myendpointname/";
    var append_params = "?gender=" + gender;

    $("#tableBuilt").destroy;
    table.setData(url + append_params);
};

The response looks like this:

{
    "count": 10,
    "total_pages": 3,
    "next": "http://localhost:8000/myendpointname/?gender=m&page=2&size=3
    "previous": null,
    "results": [
        {
            "id": 1,
            "gender": "m",
            "name": "abc",
        },
        {
            "id": 2,
            "gender": "m",
            "name": "def",
        },
        {
            "id": 3,
            "gender": "m",
            "name": "ghi",
        },
    ]
}

You can see where I'm asking tabulator to read total_pages instead of the default last_page by using dataReceiveParams. And you can also see where I'm asking tabulator to send page_size instead of the default size by using dataSendParams to generate the request.

I get two warnings . . .

Remote Pagination Error - Server response missing 'undefined' property Page.js:707:11
Remote Pagination Error - Server response missing 'undefined' property Page.js:754:11

Followed by an error.

Data Loading Error - Unable to process data due to invalid data type 
Expecting: array 
Received: undefined
Data: undefined

The code referenced by the warnings:

707: console.warn("Remote Pagination Error - Server response missing '" + this.dataReceivedNames.last_page + "' property");
754: console.warn("Remote Pagination Error - Server response missing '" + this.dataReceivedNames.data + "' property");

So it seems to me that tabulator isn't "seeing" the total_pages portion of the response. Why is it not using defaultReceiveParams? Could it be because of my ajaxResponse function returns response.results and strips the rest of the response away?

(Same behavior for Chrome and Firefox)

Answer 1

Use ajaxResponse to return data and last_page as

Codesandbox