Tabulator: Pagination on AJAX load

[vipera7]

Hey Oli,
I'm retrieving data with AJAX every 1.5second to refresh data. But when I'm on page 2 on tabulator, the data reload and I'm back on the first page.
How can I block the page so I'm not redirected to the firt page on every refresh of data.
Here is my constructor:

$("#tabledata").tabulator({
              responsiveLayout:false,
              pagination:"local",
              resizableColumns:false,
              fitColumns:true,
              placeholder:"No data",
              initialSort:[
              {column:"File", dir:"asc"},
               ],
              paginationSize:10,
              columns:[
                   {title:"File", formatter:"textarea", headerSort:"Status", field:"File"},
                   {title:"Status", field:"Status", headerFilter:selectStatus},
                   {title:"Taille", field:"bytes", formatter:byteFormatter},
                   {title:"Effectué", field:"done", formatter:percentFormatter},
                   {title:"Date d'ajout", field:"date_add", visible:true},
                   {title:"Téléchargé", field:"downloaded", formatter:byteFormatter},
                   {title:"Download", field:"download", formatter:byteFormatter},
                   {title:"Upload", field:"upload", formatter:byteFormatter},
                   {title:"Action", field:"action", headerSort:false, formatter:"html"},
               ],
           });
               setInterval(function(){
                     $("#tabledata").tabulator("setData", "fonction/data_raw.php");
                }, 1500);

data_raw.php return data like this :

[{"File":"CentOS-7-x86_64-DVD-1503-01","Status":"Pause","bytes":4310701962,"byte":4310701962,"
done":0,"date_add":"2017\/09\/14 15:08:22","downloaded":0,"download":0,"upload":0,
"action":"some `html"}]

---

I just want to add a note about your documentation, you have writed

manyally

instead of manually on Pagination section.

Thanks in advance.

[nosenfield]

Why not use the getPage and setPage functions to save and then reset the current page?

$("#example-table").tabulator("getPage"); // returns current page
$("#example-table").tabulator("setPage", 5); // show page 5

[vipera7]

Should I use it that way ?

setInterval(function(){
                    $("#tabledata").tabulator("setData", "fonction/data_raw.php");
                    $("#tabledata").tabulator("getPage");
                    $("#tabledata").tabulator("setPage", 2);
                }, 1500);

It look like it doesn't return anything.
And how can I setPage dynamically ? I thought doing something like this :

var currentPage = $("#tabledata").tabulator("getPage");
$("#tabledata").tabulator("setPage", currentPage);

I saw the option pagination:"remote", instead of pagination:"local", which one is recommended ?
And I have this error in network tab when I have 2 page:

Pagination Error - Requested page is out of range of 1 - 1: 2

One more info, the filter and sort state doesn't reinitialize on AJAX call.

Thank you for your answer :)

[vipera7]

I'm trying to use the updateOrAddData function to retrieve real time data like in the issue #456. The data is well captured but I don't know how to add the pagination in this case :

$("#tabledata").tabulator({
                pagination:"local", 
                index:"id",
                responsiveLayout:false,
                resizableColumns:false,
                //paginationSize:5,
                fitColumns:true,
                placeholder:"No data",
                initialSort:[
                {column:"File", dir:"asc"},
                ],
                columns:[
                    {title:"Id", field:"id", visible:false},
                    {title:"File", formatter:"textarea", headerFilter: "input", field:"File"},
                    {title:"Status", field:"Status"},
                ],
            });

setInterval(function(){ //refresh data every 1second
    var data = {};
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "data.php", true);
        xmlhttp.onreadystatechange = function () {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
            data = JSON.parse(xmlhttp.responseText);
               $("#tabledata").tabulator("updateOrAddData", data); //retrieve data
          }
        };
    xmlhttp.send(null);
}, 1000);

 $("#tabledata").tabulator("setPageSize", 4);

[olifolkerd]

Any update/reload of the table data will cause the table to reset to page one, this is because the table cannot compare the old data to the new data so it has no reference point as to which page it should be showing.

@nosenfield was correct in saying you should use the getPage and setPage functions to keep your table in the correct place. you just need to alter how you call them, the getPage function should be called in the dataLoading callback and the setPage function should be called in the dataLoaded callback to ensure it is only called after the ajax request has been complete, and should check that the page number does not exceed the max page no which could happen with a change in data:

//hold page number
var currentPage = 1;

//define table
$("#tabledata").tabulator({
    columns:[
         {title:"Id", field:"id", visible:false},
         {title:"File", formatter:"textarea", headerFilter: "input", field:"File"},
         {title:"Status", field:"Status"},
    ],
    dataLoading(data){
        currentPage = $("#tabledata").tabulator("getPage"); //get current page when new data loads
    },
    dataLoaded:function(data){
        $("#tabledata").tabulator("setPage", Math.min(currentPage, $("#tabledata").tabulator("getPageMax"))); //restore previous page
    },

});

//change data
$("#tabledata").tabulator("setData", "fonction/data_raw.php");

[vipera7]

I made something like this:

//hold page number
var currentPage = 1;

//define table
$("#tabledata").tabulator({
    index: "id",
    pagination:"local", //enable local pagination.
    paginationSize:3, //3 row per page
    fitColumns:true,
    columns:[
        {title:"Name", field:"name", sorter:"string", width:200},
        {title:"Progress", field:"progress", sorter:"number", formatter:"progress"},
        {title:"Gender", field:"gender", sorter:"string"},
    ],

    dataLoading(data){
       currentPage = $("#tabledata").tabulator("getPage"); //get current page when new data loads
    },
    dataLoaded:function(data){
        $("#tabledata").tabulator("setPage", Math.min(currentPage, 
        $("#tabledata").tabulator("getPageMax"))); //restore previous page
    },
});

    setInterval(function(){ //refresh data every 1second
    var data = {};
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "fonction/data_raw.php", true);
        xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
            data = JSON.parse(xmlhttp.responseText);
            $("#tabledata").tabulator("updateOrAddData", data); //change data
        }
    };
    xmlhttp.send(null);
}, 1000);

If I use the function _setData_ the pagination still reset on every Ajax call.
I have 2 issues:

• The pagination display only the first page with all data and if I click on the page 1 the pagination display correctly with all page and on ajax call the pagination doesn't reset.

• If I delete a row of data, it's still showing on the tabulator (it might be the wrong function, I'm using updateOrAddData)

This is what I got from the network tab:

Pagination Error - Requested page is out of range of 1 - 4: NaN

[nosenfield]

I could be wrong here, but I'd say don't use the dataLoaded option to set the page. It gets fired before tabulator does a refresh with the new data which I think is causing your pagination errors. Put the setPage() call AFTER the setData() in your xmlhttp.onreadystatechange listener.

[olifolkerd]

the updateOrAddData function will only update existing rows or add new ones, it will not remove existing rows. if you are completely changing your data set you need to use setData to completely replace the dataset. or use the deleteRow to remove the un-needed rows

@nosenfield is correct there, in your case you want to call the setPage function after the table has been updated.

[vipera7]

Thanks for your answers, I made it with updateOrAddData and use the deleteRow function !

[aftabthesun1984]

Hi olifolkerd ,

I need complete example of remote pagination with asp.net webform.

Thanks.

[olifolkerd]

Hey @aftabthesun1984

Im afraid this issues list is now for Bug Reports and Feature Requests only.

If you have questions, please ask them on Stack Overflow.

Tabulator is a front end JavaScript library it therefor has nothing to do with the server side data handling. The Ajax Documentation explains how to make ajax requests using Tabulator. It is then up to you to build the appropriate server side architecture.

Cheers

Oli :)