parent
ea06e74766
commit
220bf99e95
@ -0,0 +1,47 @@
|
|||||||
|
<script setup>
|
||||||
|
import { defineProps } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
searchParameterDto: Object,
|
||||||
|
listFunction: Function,
|
||||||
|
})
|
||||||
|
|
||||||
|
async function retrieveDataList(pageIndex) {
|
||||||
|
props.listFunction(pageIndex)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function retrievePreviousDataList() {
|
||||||
|
if (searchParameterDto.value.page < 2) {
|
||||||
|
return
|
||||||
|
} else {
|
||||||
|
this.retrieveDataList(props.searchParameterDto.value.page--)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function retrieveNextDataList() {
|
||||||
|
const maxPage = Math.ceil(props.searchParameterDto.value.totalItemCount / props.searchParameterDto.value.itemCountPerPage)
|
||||||
|
if (maxPage == 0 || props.searchParameterDto.value.page == maxPage) {
|
||||||
|
return
|
||||||
|
} else {
|
||||||
|
this.retrieveDataList(props.searchParameterDto.value.page++)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<nav aria-label="Page navigation">
|
||||||
|
<ul class="pagination">
|
||||||
|
<li class="page-item">
|
||||||
|
<a class="page-link" @click.prevent="retrievePreviousDataList">Previous</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item" v-for="pageNo in props.searchParameterDto.pageList" :class="pageNo == props.searchParameterDto.page ? 'active' : ''" :aria-current="pageNo == props.searchParameterDto.page ? 'page' : ''">
|
||||||
|
<a class="page-link" @click.prevent="retrieveDataList(pageNo)">{{ pageNo }}</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item">
|
||||||
|
<a class="page-link" @click.prevent="retrieveNextDataList">Next</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
Loading…
Reference in new issue