External pagination vuetify data-table

Question

I have object returned from API in the following format:

{
 "count": 0,
 "result": [
    {
     "id": "5dfbb8d5b2f68faf05688997",
     "createdOn": "1577121878136",
     "hash": "d7a3a552a2c1a765b3bcd935980a1982",
     "modifiedOn": "1577121878136",
     "company": {},
     "home": {},
     "first_name": "string",
     "last_name": "string",
     "isActive": true,
     "funding": "string",
     "medication": "string",
     "startDate": "string"
    }
  ]
}

I am using vuex to store data. How do I use vuetify's v-data-table to make pagination. The backend is paginated. And my api is axios.get(..../?page='+page + '&count='+count)' I need to pass page and count as argument to get paginated data.

I would be grateful if you could link me some of the resources to do it. I tried but I was not able to achieve it and did not find any materials for it. I followed vuetify's docs for external pagination but there it assumes the data are only externally paginated, they donot link to veux store.

clear one thing, do your api get paginated data? if you pass page and count properly? — hasan05
I mean what is your problem? your problem to get data from api? or to show paginated data on v-data-table ? — hasan05
@hasan05 the data I get from server is paginated, I need to show paginated data on v-data-table but using vuex and yes i need to pass page and count on the url. — user12140833

hasan05 hasan05 · Accepted Answer · 2020-02-04T02:46:39

call v-data-table with these parameters.

<v-data-table
        :headers="yourHeadersArrayOfObject"
        :items="yourItemsArrayOfObject"    
        :page="yourCurrentPageNumber"
        :items-per-page="yourItemsPerPage"
        @update:page="pageUpdateFunction"
      ></v-data-table>

on methods handle page update =>

pageUpdateFunction(newPageNumber) {
  console.log(newPageNumber);
  // handle other axios request here and update varibles
},

External pagination vuetify data-table

1 Answers