Install & Download:
Description:
A renderless Vue 3 composition API hook to reactively paginate data and arrange pagination buttons.
How to use it:
1. Import the usePaginator.
import { defineComponent } from 'vue'
import usePaginator from 'vue-use-paginator'2. Setup.
export default defineComponent({
setup() {
return usePaginator({
// current page index
// default: 1
page: 2,
// number of items per page
// default: 5
pageSize: 10,
// number of items
// default: 0
numItems: 70,
// number of buttons
// default: 5,
numButtons: 3,
// number of pages
numPages: 20,
// tuple containing start and end index delimiting the currently active page
// 0 based, end index is exclusive
slice: [10, 20],
// array of objects usable for displaying paginator buttons
buttons: [],
// whether the currently active page is the first/last page
hasPrev: true,
hasNext: true,
// go to the previous page
goPrev: () => number,
// go to the next page
goNext () => number,
// go to the first page
goStart () => 1,
// go to the last page
goEnd () => number,
})
}
})3. The example pagination template.
<ul class="paginator">
<li class="control" :class="!hasPrev && 'disabled'" @click="goStart">
{{ '<<' }}
</li>
<li class="control" :class="!hasPrev && 'disabled'" @click="goPrev">
{{ '<' }}
</li>
<li
v-for="(button, idx) in buttons"
:key="idx"
:class="{ 'current-page': button.active }"
@click="page = button.page"
>
{{ button.ellipsis ? '...' : button.page }}
</li>
<li class="control" :class="!hasNext && 'disabled'" @click="goNext">
{{ '>' }}
</li>
<li class="control" :class="!hasNext && 'disabled'" @click="goEnd">
{{ '>>' }}
</li>
</ul>Preview:
