PrimeVue: DataTable with server side pagination

Viewed 2121

I am trying to implement pagination using server-side, on PrimeVue's DataTable. I have looked at https://www.primefaces.org/primevue/showcase-v2/#/datatable/lazy , still unsure how to do this. I assume there should be a function that I can override, that I can replace to call my API, but I can't find any information about this..

How do I do server side pagination for PrimeVue's DataTable?

I'm on Vue2.

1 Answers

If you want pagination from the serverside, the API response should be simpler to this, and parameter page=1 can be page=1, page=2 etc. (1 and 2 will be your parameters). you can implement logic using how many records will be on per_page and how many total number of records, using this info you can get your pagination links.

{
    "data": [
        {
            "id": 1,
            "name": "Arslan.",
            "email": "arslan@example.com",
        },
        {
            "id": 2,
            "name": "Suliman",
            "email": "sl@example.com",
        }
    ],
    "links":{
        "first": "http://example.com/pagination?page=1",
        "last": "http://example.com/pagination?page=1",
        "prev": null,
        "next": null
    },
    "meta":{
        "current_page": 1,
        "from": 1,
        "last_page": 1,
        "path": "http://example.com/pagination",
        "per_page": 15,
        "to": 10,
        "total": 10
    }
}

Related