#usePagination
Tags:
一个 React Hook，用于管理分页状态。
#演示
源码
Total count:
100
Page size:
Current page:
1
Page count:
5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Target Page:
#用法
请查看 API。
#源码
点击下方链接跳转 GitHub 查看源代码。
#API
const [pagination, pagiActions] = usePagination(options)
#选项 Options
export type UsePaginationOptions = {
/**
* 总项目数。
*
* @defaultValue Number.POSITIVE_INFINITY
*/
total?: number
/**
* 每页展示的项目数。
*
* @defaultValue 10
*/
pageSize?: number
/**
* 当前页码。
*
* @defaultValue 1
*/
page?: number
/**
* 当 `page` 发生变化时的回调。
*/
onPageChange?: (pagination: UsePaginationReturnsState) => void
/**
* 当 `pageSize` 发生变化时的回调。
*/
onPageSizeChange?: (pagination: UsePaginationReturnsState) => void
/**
* 当 `pageCount` 发生变化时的回调。
*/
onPageCountChange?: (pagination: UsePaginationReturnsState) => void
}
#返回值
export interface UsePaginationReturnsState<T = any> {
/**
* 列表总项目数。
*/
total: number
/**
* 当前页码。
*
* @deprecated 请使用 `page` 代替。
*/
currentPage: number
/**
* 当前每页展示的项目数。
*
* @deprecated 请使用 `pageSize` 代替。
*/
currentPageSize: number
/**
* 当前页码。
*/
page: number
/**
* 当前每页展示的项目数。
*/
pageSize: number
/**
* 总页数。
*/
pageCount: number
/**
* 当前列表数据的起始索引。
*/
indexStart: number
/**
* 当前列表数据的结束索引。
*/
indexEnd: number
/**
* 当前展示的列表的起始计数。
*/
countStart: number
/**
* 当前展示的列表的结束计数。
*/
countEnd: number
/**
* 是否为第一页。
*/
isFirstPage: boolean
/**
* 是否为最后一页。
*/
isLastPage: boolean
/**
* 分页后的列表数据。
*/
list: T[]
}
export interface UsePaginationReturnsActions {
/**
* 前往上一页。
*
* @returns {void} `void`
*/
prev(): void
/**
* 前往下一页。
*
* @returns {void} `void`
*/
next(): void
/**
* 前往指定页码。
*
* @param {number} page - `number`，页码
* @returns {void} `void`
*/
go: (page: number) => void
/**
* 设置每页展示的项目数。
*
* @param {number} size - `number`，每页展示的项目数
* @returns {void} `void`
*/
setPageSize: (size: number) => void
}
export type UsePaginationReturns = readonly [UsePaginationReturnsState, UsePaginationReturnsActions]
ON THIS PAGE