I'm trying to create a function that allows my tabled data to display only a certain number of rows per page and have a next and previous page functionality without using an external library like vuetify. I managed to restrict my table to 15 rows per page but I'm not able to go to the next page. This is my next and previous functions
nextButton() {
if (this.quotes.length > this.rowsPerPage * (this.currentPage + 1)) {
this.currentPage += 1;
} else {
this.currentPage += 0;
}
},
previousButton() {
if (this.currentPage > 0) {
this.currentPage -= 1;
} else {
this.currentPage -=0;
}
},
This is my computed function that limits to 15 per page
computed: {
quotesPerPage() {
return this.quotes.slice(0, this.rowsPerPage);
}
},
You need to slice the data using start index and end index as you can see here in Array.prototype.slice.
first calculate the startIndex which is the current page index (0 based) times the rows per page.
The endIndex will be the startIndex plus the rowsPerPage.
example:
index: 0, start: 0, end: 10
index: 1, start: 10, end: 20
index: 2, start: 20, end: 30
I created this code to show you how you can calculate the indices
I also rewrited the next and previous code to use Math.max and Math.min but is just to show you a different way to calculate the next and previous page, there is also a way to do this using if-else statements
new Vue({
el: "#pagination-app",
computed: {
data: function() {
const startIndex = this.pageIndex * this.rowsPerPage;
const endIndex = startIndex + this.rowsPerPage;
return this.rows.slice(startIndex, endIndex);
},
page: function() {
return this.pageIndex + 1;
}
},
methods: {
next() {
const maxPageIndex = Math.ceil(this.rows.length / this.rowsPerPage) - 1;
this.pageIndex = Math.min(this.pageIndex + 1, maxPageIndex);
},
previous() {
this.pageIndex = Math.max(this.pageIndex - 1, 0);
}
},
data() {
return {
rows: [
{ name: "this is the first" },
{ name: "second" },
{ name: "third" },
{ name: "this is the first of second page" },
{ name: "b from 2th" },
{ name: "c from 3th" },
{ name: "foo" },
{ name: "bar, the last item" }
],
pageIndex: 0,
rowsPerPage: 3
}
}
});.row {
padding: 10px;
border: 1px dashed #ccc;
margin: 5px;
display: inline-block; /** because the code window is so small **/
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="pagination-app" class="demo">
<div>
<div class="row" v-for="item in data">
{{ item.name }}
</div>
</div>
<button v-on:click="previous()">previous</button>
<button v-on:click="next()">next</button>
<div>
page: {{ page }}
</div>
</div>