# 分页 Pagination

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/pagination
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

采用分页控制单页内的信息数量，也可进行页面跳转。

## 安装

```bash
npm install @arco-design/web-react@2.66.18
```

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基础用法**：最简单的用法。
- **更多页码**：页码数较大时，使用多页码的分页样式。
- **改变每页展示条目**：可定义每页展示条目数量。
- **跳转**：输入页码，可快速跳转到指定页。
- **尺寸**：通过指定 `size` 字段，可以使用不同尺寸的分页器。
- **简洁**：在空间有限的场景下，可以将 `simple` 设置为 `true`，使用较为简单的文本分页方式。
- **展示总数**：您可以通过设置 `showTotal` 来显示数据总数。
- **受控的数据总数**：通过改变 `total` 的值，解决无法计算页码总数的情景。
- **全部展示**：展示全部配置项。
- **样式定制**：可以通过样式定制得到不同的视觉风格。
- **上一步和下一步**：设置 `itemRender`，可以自由定制分页按钮。
- **省略页码时展示长度**：通过 `bufferSize` 可以设置 `current` 页与 `...` 之间的页码个数。 一个 `...` 至少代表省略 `2` 页。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API 

### Pagination

|参数名|描述|类型|默认值|版本|
|---|---|---|---|---|
|disabled|是否禁用|boolean |`-`|-|
|hideOnSinglePage|是否在只有一页的情况下隐藏|boolean |`-`|2.6.0|
|pageSizeChangeResetCurrent|`pageSize` 改变的时候重置当前页码为 `1`|boolean |`true`|-|
|showJumper|是否显示快速跳转到某页，在 `simple` 模式下默认为 true|boolean |`-`|-|
|showMore|是否显示更多页码提示（当尚无法计算数据总数时可以使用）|boolean |`-`|-|
|simple|是否应用精简分页模式|boolean |`-`|-|
|sizeCanChange|是否可以改变每页条数|boolean |`-`|-|
|bufferSize|`current` 页与 `...` 之间的页码个数|number |`2`|2.32.0|
|current|当前页|number |`-`|-|
|defaultCurrent|当前页默认值|number |`-`|-|
|defaultPageSize|默认每页数据条数|number |`-`|-|
|pageSize|每页数据条数|number |`-`|-|
|total|数据总数|number |`-`|-|
|itemRender|定制分页按钮的结构|(page: number,type: 'page' \| 'more' \| 'prev' \| 'next',originElement: ReactNode) => ReactNode |`-`|-|
|size|分页器尺寸|'mini' \| 'small' \| 'default' \| 'large' |`-`|-|
|activePageItemStyle|被选中的分页按钮样式|CSSProperties |`-`|-|
|className|节点类名|string \| string[] |`-`|-|
|icons|设置分页器的图标|{prev?: ReactNode;next?: ReactNode;more?: ReactNode;} |`-`|-|
|pageItemStyle|分页按钮样式|CSSProperties |`-`|-|
|selectProps|用于配置弹出框的属性|Partial<[SelectProps](select#select)> |`-`|-|
|sizeOptions|每页可以显示数据条数|number[] |`-`|-|
|style|节点样式|CSSProperties |`-`|-|
|onChange|变化时的回调|(pageNumber: number, pageSize: number) => void |`-`|-|
|onPageSizeChange|pageSize 变化时的回调|(size: number, current: number) => void |`-`|-|
|showTotal|是否显示数据总数|boolean \| ((total: number, range: number[]) => ReactNode) |`-`|-|

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt