---
title: Pagination 分页器
order: 6
group:
  path: /components
nav:
  title: 组件
  path: /components
---

## 使用

采用分页的形式分隔长列表

### 基本用法

```jsx
import React from 'react';
import { Pagination, ConfigProvider, Row, Col } from 'quanta-design';
import enUS from 'antd/es/locale/en_US';
import zhCN from 'antd/es/locale/zh_CN';

export default () => (
  <ConfigProvider locale={zhCN}>
    <Row>
      <Col span={3}>默认版</Col>
      <Col span={21}>
        <Pagination
        // defaultCurrent={1}
        // total={500}
        // defaultPageSize={10}
        // showQuickJumper
        // showSizeChanger
        // onChange={handleChange}
        />
      </Col>
    </Row>
    <br />
    <Row>
      <Col span={3}>简单版</Col>
      <Col span={21}>
        <Pagination
          simple
          defaultCurrent={1}
          total={500}
          defaultPageSize={10}
          // showQuickJumper
          showSizeChanger={false}
        />
      </Col>
    </Row>
    <br />
    <Row>
      <Col span={3}>分页</Col>
      <Col span={21}>
        <Pagination
          // size="small"
          defaultCurrent={1}
          total={500}
          defaultPageSize={10}
          showQuickJumper
          showSizeChanger
        />
      </Col>
    </Row>
  </ConfigProvider>
);
```

## API

| 参数             | 说明                                                              | 类型                                                                         | 默认值                     | 版本 |
| ---------------- | ----------------------------------------------------------------- | ---------------------------------------------------------------------------- | -------------------------- | ---- |
| current          | 当前页数                                                          | number                                                                       | -                          |      |
| defaultCurrent   | 默认的当前页数                                                    | number                                                                       | 1                          |      |
| defaultPageSize  | 默认的每页条数                                                    | number                                                                       | 10                         |      |
| disabled         | 禁用分页                                                          | boolean                                                                      | -                          |      |
| hideOnSinglePage | 只有一页时是否隐藏分页器                                          | boolean                                                                      | false                      |      |
| itemRender       | 用于自定义页码的结构，可用于优化 SEO                              | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | -                          |      |
| pageSize         | 每页条数                                                          | number                                                                       | -                          |      |
| pageSizeOptions  | 指定每页可以显示多少条                                            | string\[]                                                                    | \['10', '20', '50', '100'] |      |
| showLessItems    | 是否显示较少页面内容                                              | boolean                                                                      | false                      |      |
| showQuickJumper  | 是否可以快速跳转至某页                                            | boolean \| `{ goButton: ReactNode }`                                         | false                      |      |
| showSizeChanger  | 是否展示 `pageSize` 切换器，当 `total` 大于 `100` 时默认为 `true` | boolean                                                                      | -                          |      |
| showTotal        | 用于显示数据总量和当前数据顺序                                    | Function(total, range)                                                       | -                          |      |
| simple           | 当添加该属性时，显示为简单分页                                    | boolean                                                                      | -                          |      |
| size             | 当为「small」时，是小尺寸分页                                     | 'default' \| 'small'                                                         | ""                         |      |
| responsive       | 当 size 未指定时，根据屏幕宽度自动调整尺寸                        | boolean                                                                      | -                          |      |
| total            | 数据总数                                                          | number                                                                       | 0                          |      |
| onChange         | 页码改变的回调，参数是改变后的页码及每页条数                      | Function(page, pageSize)                                                     | noop                       |      |
| onShowSizeChange | pageSize 变化的回调                                               | Function(current, size)                                                      | noop                       |      |