CODEWITHSUNDEEP
vue.jsvuetify.js
studio-pj
studio-pj

Reputation: 874

Vuetify - Sync pagination with URL params

Vuetify has a Data table component which supports external pagination + sorting (via API).
What's the best way to sync these with URL params (2-way binding)?

Example URL:
http://localhost:3000/users?page=22

When I go to this link, I want to see 22 as the current page in the pagination. When I click the Next button in the pagination component, I want to see the URL updated to http://localhost:3000/users?page=23

Upvotes: 1

Views: 2616

Answers (3)

Adrien M
Adrien M

Reputation: 11

Here is a librairie we made at my work: https://github.com/socotecio/vue-datatable-url-sync

It has an option and example to work directly with vuetify.

Working with vue 2 and 3. And has some useful parameters.

Upvotes: 0

loomchild
loomchild

Reputation: 778

I define a computed page variable operating directly on query param:

computed: {
  page: {
    get () {
      return parseInt(this.$route.query.page) || 1
    },
    set (page) {
      if (this.page !== page) {
        this.$router.replace({ query: { ...this.$route.query, page } })
      }
    }
  }
}

And using it as page prop with sync modifier as follows:

<v-data-table :headers="headers" :items="filteredUsers" :page.sync="page" />

This will work if table data is fetched before the table is displayed. If your data is loaded asynchronously, you'd need to reset the page (due to a bug?).

Upvotes: 0

jssDev
jssDev

Reputation: 993

You can do this:

  1. Assocciate @pagination event to some method and 'page' prop whith data item.
  2. In you method, set the url with window.history.pushState
  3. In created() lifecycle hook, get query param from url and set it into data.

An example:

<template>
<div>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
    @pagination="setQueryPage"
    :page="paramPage"
  ></v-data-table>
</div>
</template>
<script>
  export default {
    data () {
        return {
            headers: [
            {
                text: 'Dessert (100g serving)',
                align: 'start',
                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%',
            },
            ],
            paramPage : 1,
        }

    },
    methods: {
       setQueryPage(paginationObject){
           let url = 'users?page='+ paginationObject.page
           window.history.pushState("", "", url);
        }
    },
    created(){
        console.log(this.$route.query.page)
        this.paramPage = parseInt(this.$route.query.page)
    }

  }
</script>

Upvotes: 2

Related Questions