CODEWITHSUNDEEP
vue.jspaginationvue-componentvuexvuetify.js
moses toh
moses toh

Reputation: 13162

How can I make pagination client side on vue?

I try like this:

https://codepen.io/trendingnews/pen/dyPWXre?editors=1010 (demo and full code)

I using vuetify

I get the pagination from here : https://vuetifyjs.com/en/components/paginations#paginations

I add on my component like this :

      <v-pagination
        v-if="pagination.total >= pagination.rowsPerPage"
        v-model="pagination.page"
        :length="pages"
        circle
        @input="onPageChange"
       ></v-pagination>

I made it like that. I am confused displaying 5 data per page when open first time and when clicking on the second page displays 5 data next. etc

How can I do it?

Upvotes: 0

Views: 1245

Answers (2)

T. Short
T. Short

Reputation: 3614

I see currently you have all of your items inside one single array and then you loop through it to display every item.

There are several ways you could do it. One way is to filter the list through a computed property that is calculated based on the current pagination settings.

computed: {
    filterItems() {
        const start = this.pagination.page * this.pagination.rowsPerPage - this.pagination.rowsPerPage;
        const end = start + this.pagination.rowsPerPage - 1;

        return this.items.filter((item, index) => index >= start && index <= end);
    }
}

And then simply change the v-for loop to:

v-for="(item, i) in filterItems"

Upvotes: 0

markcc
markcc

Reputation: 643

The Vuetify is just a "CSS", you have to do your pagination logic yourself. Can refer codepen below

https://codepen.io/markcc/pen/vYEmXro?editors=1010

Basically what I updated is changing your looping Items into cloneItems (it get from Computed Properties, so that I can do the pagination logic here).

cloneItems() {
        var clone = JSON.parse(JSON.stringify(this.items));
        var startFrom = (this.pagination.page*this.pagination.rowsPerPage)-this.pagination.rowsPerPage;
        return clone.splice(startFrom, this.pagination.rowsPerPage);
    }

Upvotes: 1

Related Questions