useOffsetPagination
Reactive offset pagination.
Package: @vueuse/core
Category: Utilities
Usage
import { useOffsetPagination } from '@vueuse/core'
function fetchData({ currentPage, currentPageSize }: { currentPage: number, currentPageSize: number }) {
fetch(currentPage, currentPageSize).then((responseData) => {
data.value = responseData
})
}
const {
currentPage,
currentPageSize,
pageCount,
isFirstPage,
isLastPage,
prev,
next,
} = useOffsetPagination({
total: database.value.length,
page: 1,
pageSize: 10,
onPageChange: fetchData,
onPageSizeChange: fetchData,
})Options
| Option | Type | Default | Description |
|---|---|---|---|
| total | MaybeRefOrGetter<number> |
- | Total number of items. |
| pageSize | MaybeRefOrGetter<number> |
10 | The number of items to display per page. |
| page | MaybeRef<number> |
1 | The current page number. |
| onPageChange | (returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>) => unknown |
- | Callback when the page change. |
| onPageSizeChange | (returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>) => unknown |
- | Callback when the pageSize change. |
| onPageCountChange | (returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>) => unknown |
- | Callback when the pageCount change. |