VueUseuseOffsetPagination
Reactive offset pagination.
Demo
total:
80
pageCount:
8
currentPageSize:
10
currentPage:
1
isFirstPage:
true
isLastPage:
false
| id | name |
Usage
ts
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,
onPageChange: fetchData,
onPageSizeChange: fetchData,
})
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,
onPageChange: fetchData,
onPageSizeChange: fetchData,
})
Component Usage
This function also provides a renderless component version via the
@vueuse/componentspackage. Learn more about the usage.
html
<UseOffsetPagination
v-slot="{
currentPage,
currentPageSize,
next,
prev,
pageCount,
isFirstPage,
isLastPage
}"
:total="database.length"
@page-change="fetchData"
@page-size-change="fetchData"
>
<div class="gap-x-4 gap-y-2 grid-cols-2 inline-grid items-center">
<div opacity="50">
total:
</div>
<div>{{ database.length }}</div>
<div opacity="50">
pageCount:
</div>
<div>{{ pageCount }}</div>
<div opacity="50">
currentPageSize:
</div>
<div>{{ currentPageSize }}</div>
<div opacity="50">
currentPage:
</div>
<div>{{ currentPage }}</div>
<div opacity="50">
isFirstPage:
</div>
<div>{{ isFirstPage }}</div>
<div opacity="50">
isLastPage:
</div>
<div>{{ isLastPage }}</div>
</div>
<div>
<button :disabled="isFirstPage" @click="prev">
prev
</button>
<button :disabled="isLastPage" @click="next">
next
</button>
</div>
</UseOffsetPagination>
<UseOffsetPagination
v-slot="{
currentPage,
currentPageSize,
next,
prev,
pageCount,
isFirstPage,
isLastPage
}"
:total="database.length"
@page-change="fetchData"
@page-size-change="fetchData"
>
<div class="gap-x-4 gap-y-2 grid-cols-2 inline-grid items-center">
<div opacity="50">
total:
</div>
<div>{{ database.length }}</div>
<div opacity="50">
pageCount:
</div>
<div>{{ pageCount }}</div>
<div opacity="50">
currentPageSize:
</div>
<div>{{ currentPageSize }}</div>
<div opacity="50">
currentPage:
</div>
<div>{{ currentPage }}</div>
<div opacity="50">
isFirstPage:
</div>
<div>{{ isFirstPage }}</div>
<div opacity="50">
isLastPage:
</div>
<div>{{ isLastPage }}</div>
</div>
<div>
<button :disabled="isFirstPage" @click="prev">
prev
</button>
<button :disabled="isLastPage" @click="next">
next
</button>
</div>
</UseOffsetPagination>
Component event supported props event callback and event listener.
event listener:
html
<UseOffsetPagination
v-slot="{
currentPage,
currentPageSize,
next,
prev,
pageCount,
isFirstPage,
isLastPage
}"
:total="database.length"
@page-change="fetchData"
@page-size-change="fetchData"
@page-count-change="onPageCountChange"
>
<!-- your code -->
</UseOffsetPagination>
<UseOffsetPagination
v-slot="{
currentPage,
currentPageSize,
next,
prev,
pageCount,
isFirstPage,
isLastPage
}"
:total="database.length"
@page-change="fetchData"
@page-size-change="fetchData"
@page-count-change="onPageCountChange"
>
<!-- your code -->
</UseOffsetPagination>
or props event callback:
html
<UseOffsetPagination
v-slot="{
currentPage,
currentPageSize,
next,
prev,
pageCount,
isFirstPage,
isLastPage
}"
:total="database.length"
:on-page-change="fetchData"
:on-page-size-change="fetchData"
:on-page-count-change="onPageCountChange"
>
<!-- your code -->
</UseOffsetPagination>
<UseOffsetPagination
v-slot="{
currentPage,
currentPageSize,
next,
prev,
pageCount,
isFirstPage,
isLastPage
}"
:total="database.length"
:on-page-change="fetchData"
:on-page-size-change="fetchData"
:on-page-count-change="onPageCountChange"
>
<!-- your code -->
</UseOffsetPagination>
Type Declarations
Show Type Declarations
typescript
export interface UseOffsetPaginationOptions {
/**
* Total number of items.
*/
total?: MaybeRef<number>
/**
* The number of items to display per page.
* @default 10
*/
pageSize?: MaybeRef<number>
/**
* The current page number.
* @default 1
*/
page?: MaybeRef<number>
/**
* Callback when the `page` change.
*/
onPageChange?: (
returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>
) => unknown
/**
* Callback when the `pageSize` change.
*/
onPageSizeChange?: (
returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>
) => unknown
/**
* Callback when the `pageCount` change.
*/
onPageCountChange?: (
returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>
) => unknown
}
export interface UseOffsetPaginationReturn {
currentPage: Ref<number>
currentPageSize: Ref<number>
pageCount: ComputedRef<number>
isFirstPage: ComputedRef<boolean>
isLastPage: ComputedRef<boolean>
prev: () => void
next: () => void
}
export declare type UseOffsetPaginationInfinityPageReturn = Omit<
UseOffsetPaginationReturn,
"isLastPage"
>
export declare function useOffsetPagination(
options: Omit<UseOffsetPaginationOptions, "total">
): UseOffsetPaginationInfinityPageReturn
export declare function useOffsetPagination(
options: UseOffsetPaginationOptions
): UseOffsetPaginationReturn
export interface UseOffsetPaginationOptions {
/**
* Total number of items.
*/
total?: MaybeRef<number>
/**
* The number of items to display per page.
* @default 10
*/
pageSize?: MaybeRef<number>
/**
* The current page number.
* @default 1
*/
page?: MaybeRef<number>
/**
* Callback when the `page` change.
*/
onPageChange?: (
returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>
) => unknown
/**
* Callback when the `pageSize` change.
*/
onPageSizeChange?: (
returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>
) => unknown
/**
* Callback when the `pageCount` change.
*/
onPageCountChange?: (
returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>
) => unknown
}
export interface UseOffsetPaginationReturn {
currentPage: Ref<number>
currentPageSize: Ref<number>
pageCount: ComputedRef<number>
isFirstPage: ComputedRef<boolean>
isLastPage: ComputedRef<boolean>
prev: () => void
next: () => void
}
export declare type UseOffsetPaginationInfinityPageReturn = Omit<
UseOffsetPaginationReturn,
"isLastPage"
>
export declare function useOffsetPagination(
options: Omit<UseOffsetPaginationOptions, "total">
): UseOffsetPaginationInfinityPageReturn
export declare function useOffsetPagination(
options: UseOffsetPaginationOptions
): UseOffsetPaginationReturn
Source
Contributors
Anthony Fu
JD Solanki
Curt Grimes
webfansplz
三咲智子
Jelf