usePagination

一个 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]