Last active
September 4, 2023 07:54
-
-
Save moaoa/209c364f41ea618036b8a2cbab394509 to your computer and use it in GitHub Desktop.
vue pagination component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="row mtp-3"> | |
<div class="block-27"> | |
<ul class="pagination-ul"> | |
<li @click="prev" class="cursor"> | |
<a> | |
<img | |
class="chevron_right_pag" | |
src="/assets/img/chevron_big_right.png" | |
alt="right" | |
width="18" | |
height="18" | |
/> | |
</a> | |
</li> | |
<li | |
v-for="pageNumber in pages" | |
:class="{ | |
active: pageNumber === currentPage, | |
cursor: true, | |
}" | |
@click="setCurrentPage(pageNumber)" | |
> | |
<span>{{ pageNumber === 0 ? "..." : pageNumber }}</span> | |
</li> | |
<li @click="next" class="cursor"> | |
<a> | |
<img | |
class="chevron_left_pag" | |
src="/assets/img/chevron_big_left.png" | |
alt="right" | |
width="18" | |
height="18" | |
/> | |
</a> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</template> | |
<script> | |
const generateArray = (from, to) => { | |
return Array.from({length: to - from + 1}).map((_, i) => i + from) | |
} | |
export default { | |
props: { | |
currentPage: { | |
default: 1, | |
validator: (val) => typeof parseInt(val) === "number", | |
}, | |
total: { | |
default: 0, | |
validator: (val) => typeof parseInt(val) === "number", | |
}, | |
pageSize: { | |
default: 0, | |
validator: (val) => typeof parseInt(val) === "number", | |
}, | |
}, | |
methods: { | |
generateArray(from, to) { | |
return generateArray(from, to); | |
}, | |
next() { | |
if (this.currentPage !== this.numberOfPages) { | |
this.setCurrentPage(this.currentPage + 1); | |
} | |
}, | |
prev() { | |
if (this.currentPage > 1) { | |
this.setCurrentPage(this.currentPage - 1); | |
} | |
}, | |
setCurrentPage(page) { | |
if (page !== 0) { | |
this.$emit("setCurrentPage", page); | |
} | |
}, | |
}, | |
computed: { | |
pages() { | |
if (this.numberOfPages <= 5) | |
return Array.from({ length: this.numberOfPages }).map( | |
(_, i) => i + 1 | |
); | |
let arr = null; | |
// if we are on the page that is before last page | |
if (this.currentPage === this.numberOfPages - 1) { | |
arr = this.generateArray( | |
this.currentPage - 2, | |
this.currentPage | |
); | |
} else if (this.currentPage === 1) { | |
arr = this.generateArray( | |
this.currentPage, | |
this.currentPage + 2 | |
); | |
} else if (this.currentPage !== this.numberOfPages) { | |
// if we are not on the last page show one after and one before the currentPage | |
arr = this.generateArray( | |
this.currentPage - 1, | |
this.currentPage + 1 | |
); | |
} else { | |
// if we are on the last page then show the three items before it | |
arr = this.generateArray( | |
this.currentPage - 3, | |
this.currentPage - 1 | |
); | |
} | |
arr.push(0); // 0 will be replaced with the dots "..." | |
arr.push(this.numberOfPages); // add the last page | |
return arr; | |
}, | |
maxNumberOfPaginationItems() { | |
return 5; | |
}, | |
numberOfPages() { | |
if (this.pageSize == 0) return 0; | |
return Math.ceil(this.total / this.pageSize); | |
}, | |
// numberOfItemsToRender(){ | |
// if(this.numberOfPages - this.currentPage > this.maxNumberOfPaginationItems){ | |
// return 4 | |
// } else { | |
// return this.numberOfPages - this.currentPage + 1 | |
// } | |
// }, | |
}, | |
}; | |
</script> | |
<style> | |
@media screen and (min-width: 321px) { | |
.pagination-ul li { | |
margin: 0.25rem; | |
} | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment