How to add pagination code to data table in vue js?

Question

I'm utilizing v-data-table in a vue component, looking through the documentation it wasn't clear to me how to utilize built in pagination in the data table and how to invoke code for the pagination . I tried to look through some of the blogs but still not clear.

<template>
<v-data-table
  :page="page"
  :pageCount="numOfPages"
  :headers="headers"
  ...
</template>
<script>
export default {
   name: "DataTableSample", 
   data() {
     return { 
   ...
   },
   watch: {
     options: {
       handler() {
         this.getData();
       },
     },
     deep: true,
   },
   methods: {
     load(){
       //load data
    ...
   },
   mounted(){
     this.getData();
  },
 };
</script>

What is 'pagination code'? An event listener of page change? Or a slot?... — ינון רחמים
– ינון רחמים, Commented Jun 9, 2022 at 20:07
thanks, i'm new to vue js and also to libraries around it. would be really helpful, if you could direct me to some sample. I was thiking of a event listerner, that is waht i'm familiar with javascript — arve
– arve, Commented Jun 9, 2022 at 20:14
What are you trying to do?.. if you want to create your own pagination UI and logic, so take a look at vuetifyjs.com/en/components/data-tables/#external-pagination — ינון רחמים
– ינון רחמים, Commented Jun 9, 2022 at 20:17
not trying to do the external pagination. i just didn't see an example of how to use inbuilt pagination , or add in built pagination and then invoke a function to call the api for the next page data — arve
– arve, Commented Jun 9, 2022 at 20:28

Rohìt Jíndal · Accepted Answer · 2022-06-10 07:42:12Z

Not sure what does this statement means it wasn't clear to me how to utilize built in pagination in the data table and how to invoke code for the pagination ?

But <v-data-table> providing pagination by default. Here is the demo :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      selected: [ ],
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%',
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%',
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%',
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%',
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%',
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%',
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%',
        }
      ]
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css"/>
<div id="app">
  <v-app>
    <v-data-table 
      id="mytable"
      v-model="selected"
      :headers="headers"
      :items="desserts"
      :items-per-page="5"
      class="elevation-1"
      item-key="name"
    >
    </v-data-table>
  </v-app>
</div>

thanks. if you don't mind can you provide me sample on how to set up my v-data-table , such that when user clicks on next page number, some function is invoke and in that function i make a call to api to get next page data

Collectives™ on Stack Overflow

How to add pagination code to data table in vue js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related