# Pagination

- Page: https://jiguang132.com/resources/arco-design/docs/pagination
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Use pagination to control the amount of information in a single page.

## Install

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

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: The simplest usage.
- **More**: More pages.
- **Change pageSize**: The pageSize of Pagination can be changed.
- **Jump**: Enter the page number to quickly jump to the specified page.
- **Size**: Set `size` field to use different sizes.
- **Simple**: When page space is limited, you can set `simple` to `true`.
- **Show Total**: Set `showTotal` to show the total number of data.
- **Count under control**: By changing the value of `total`, solve the situation where the total number of pages cannot be calculated.
- **Show all**: Show all configuration items.
- **Customize style**: Customize style to get different visual styles.
- **Previous and next**: Set the `itemRender` to customize the pagination buttons.
- **Display length when page numbers are omitted**: With `bufferSize` you can set the number of pages between the `current` page and `...`. An `...` means at least `2` pages are omitted.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Pagination

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|disabled|Whether to disable|boolean |`-`|-|
|hideOnSinglePage|Whether to hide when there is only one page|boolean |`-`|2.6.0|
|pageSizeChangeResetCurrent|When pageSize changes, resets the current page number to `1`|boolean |`true`|-|
|showJumper|Whether to display quick jump. Defaults to true in `simple` mode|boolean |`-`|-|
|showMore|Whether to show more page number tips (can be used when the total number of data cannot be calculated yet)|boolean |`-`|-|
|simple|Whether to use simplified pagination mode|boolean |`-`|-|
|sizeCanChange|Is it possible to change page size|boolean |`-`|-|
|bufferSize|the number of pages between the `current` page and `...`|number |`2`|2.32.0|
|current|Current page|number |`-`|-|
|defaultCurrent|To set default current page|number |`-`|-|
|defaultPageSize|To set default number of data per page|number |`-`|-|
|pageSize|Number of data items per page|number |`-`|-|
|total|Total number of data|number |`-`|-|
|itemRender|Customized pagination button structure|(page: number,type: 'page' \| 'more' \| 'prev' \| 'next',originElement: ReactNode) => ReactNode |`-`|-|
|size|pager size|'mini' \| 'small' \| 'default' \| 'large' |`-`|-|
|activePageItemStyle|The style of the selected page button|CSSProperties |`-`|-|
|className|Additional css class|string \| string[] |`-`|-|
|icons|Set icon of the pager|{prev?: ReactNode;next?: ReactNode;more?: ReactNode;} |`-`|-|
|pageItemStyle|Pagination button style|CSSProperties |`-`|-|
|selectProps|Props of the `Select`|Partial<[SelectProps](select#select)> |`-`|-|
|sizeOptions|The number of data items that can be displayed per page|number[] |`-`|-|
|style|Additional style|CSSProperties |`-`|-|
|onChange|Callback when page changes|(pageNumber: number, pageSize: number) => void |`-`|-|
|onPageSizeChange|Callback when pageSize changes|(size: number, current: number) => void |`-`|-|
|showTotal|Whether to display the total number of data|boolean \| ((total: number, range: number[]) => ReactNode) |`-`|-|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt