44 lines
1.1 KiB
Vue
44 lines
1.1 KiB
Vue
<template>
|
|
<div class="pagination">
|
|
<button @click="gotoPage(0)">First</button>
|
|
<button @click="gotoPage(page - 1)">Previous</button>
|
|
<button class="unselectable">{{ page + 1 }} / {{ maxPages }}</button>
|
|
<button @click="gotoPage(page + 1)">Next</button>
|
|
<button @click="gotoPage(maxPages)">Last</button>
|
|
</div>
|
|
|
|
<div class="pagination">
|
|
<button class="unselectable">Items per page</button>
|
|
|
|
<button :class="{ active: (itemsPerPage === n) }" @click="setPageSize(n)" v-for="n of [5, 10, 20, 50]" :key="n">{{ n }}</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
page: Number,
|
|
itemsPerPage: Number,
|
|
maxPages: Number,
|
|
},
|
|
methods: {
|
|
gotoPage(page) {
|
|
if (page < 0) {
|
|
page = 0;
|
|
}
|
|
|
|
if (page >= this.maxPages) {
|
|
page = this.maxPages - 1;
|
|
}
|
|
|
|
if (page !== this.page) {
|
|
this.$emit('update:page', page);
|
|
}
|
|
},
|
|
setPageSize(n) {
|
|
this.$emit('update:itemsPerPage', n);
|
|
}
|
|
}
|
|
}
|
|
</script>
|