Tabulator - Progressive Ajax Loading

Question

Tabulator: 4.9 - Google Chrome
I can't seem to get ajaxProgressiveLoad functioning as expected. (constructor is shown below).
The php file queries a SQL database and currently returns 107,000 records and is returned as a json:

echo(json_encode(["last_page"=>1, "data"=>$data]));

(A side question ref last_page - how is this determined when dealing with large datasets?)

The SQL query itself takes approx 1.5 seconds to return the data, but it seems as if the tabulator is waiting for all the data before displaying all the records after 20 seconds.

20:26:29.586 Callback: ajaxRequesting
20:26:51.059 Callback: ajaxResponse

This dataset is expected to grow and it would be preferable for the user to see some data immediatley or at least after a few seconds. Is there something i've missed in the constructor or on the php file?

Thanks in advance for any guidance offered Chris

var table = new Tabulator("#tabulator-table", {
    index:"Counter", 
    //initialSort:[{column:'Date', dir:'desc'}],
    height:(window.innerHeight - 100), 
    layout:"fitDataStretch",
    tooltips:true,
    tooltipsHeader:true,
    placeholder:"Please wait - retrieving data....",
    ajaxURL:"tabulatorSELECT_vMPS_Extract.php",
    ajaxParams:{CDSDealerCodes:strCDSDealerCodes},
    ajaxProgressiveLoad:"load",
    //ajaxProgressiveLoadDelay:200, //wait 200 milliseconds between each request
    ajaxRequesting:function(url, params){
        //url - the URL of the request
        //params - the parameters passed with the request
        console.log("Callback: ajaxRequesting");
    },
    ajaxResponse:function(url, params, response){
        //url - the URL of the request
        //params - the parameters passed with the request
        //response - the JSON object returned in the body of the response.
        console.log("Callback: ajaxResponse");
        return response; //return the response data to tabulator
    },
    headerFilterPlaceholder:"...",
    columns:[
        {title:'Date',             field:'Date',             headerFilter:'input', sorter:'datetime', bottomCalc:'count'},
        {title:'Amount',           field:'Amount',           headerFilter:'input', hozAlign:'right', formatter:"money", bottomCalc:"sum", bottomCalcParams:{formatter:"money"}, bottomCalcFormatter:"money"},
        {title:'Currency',         field:'Currency',         headerFilter:'input'},
        {title:'Programme',        field:'Programme',        headerFilter:'input'}
    ]
});

Answer 1

The point of the progressive ajax loading is that you DONT send all the data in one go which is exactly what you are doing there, which is why it is running slow.

You should paginate the data into chunks of say 20 rows at a time (the number of rows is up to you)

Tabulator will then request the data page by page as it is needed to be displayed, it tells you which chunk to return in the page param sent with the request.

the last_page property in the returned data should be the total number of available rows divided by the page size (rounded up)