# Pagination 分页

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/pagination/freepass)
- 平台：PC
- 维护者：陈佳敏
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys/#s31
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Pagination]

## 代码演示

### 基础用法

页码简化显示

```jsx
import React from 'react';
import { Pagination } from '@weapp/ui';

export default class PaginationDemo extends React.PureComponent<{}> {

  onChange = (value: number, pageSize: number) => {
    console.log('onChange', value, pageSize);
  }

  render() {
    return (
      <Pagination
        defaultValue={1}
        total={50}
        showSizeChanger={true}
        onChange={this.onChange}
        onSizeChange={this.onChange}
        showFullSizeOptionLabel={true}
      />
    );
  }
}
```

### 页码铺开

页码铺开显示

```jsx
import React from 'react';
import { Pagination } from '@weapp/ui';

export default class PaginationDemo extends React.PureComponent<{}> {

  onChange = (value: number, pageSize: number) => {
    console.log('onChange', value, pageSize);
  }

  render() {
    return (
      <Pagination
        defaultValue={1}
        total={500}
        simple={false}
        showTotal={true}
        showJumper={true}
        showSizeChanger={true}
        onChange={this.onChange}
        onSizeChange={this.onChange}
      />
    );
  }
}
```

### 铺开页面数量限制

只显示数量限制内的前后页码

```jsx
import React from 'react';
import { Pagination } from '@weapp/ui';

export default class PaginationDemo extends React.PureComponent<{}> {

  onChange = (value: number, pageSize: number) => {
    console.log('onChange', value, pageSize);
  }

  render() {
    return (
      <Pagination
        defaultValue={1}
        total={500}
        simple={false}
        pageLimit={10}
        showTotal={true}
        showJumper={true}
        showSizeChanger={true}
        onChange={this.onChange}
        onSizeChange={this.onChange}
      />
    );
  }
}
```

### 可折叠分页

浏览按钮使用

```jsx
import React from 'react';
import { Pagination } from '@weapp/ui';

export default class PaginationDemo extends React.PureComponent<{}> {

  onChange = (value: number, pageSize: number) => {
    console.log('onChange', value, pageSize);
  }

  render() {
    return (
      <Pagination
        defaultValue={1}
        total={500}
        simple={true}
        showCollapsed={true}
        showTotal={true}
        showSizeChanger={true}
        onChange={this.onChange}
        onSizeChange={this.onChange}
      />
    );
  }
}
```

### 平铺分页模式

```jsx
import React from 'react';
import { Pagination } from '@weapp/ui';

export default class UseFlatDemo extends React.PureComponent<{}> {

  onChange = (value: number, pageSize: number) => {
    console.log('onChange', value, pageSize);
  }

  render() {
    return (
      <div style={{ width: '360px' }}>
        <Pagination
          defaultValue={1}
          total={50}
          showSizeChanger={true}
          onChange={this.onChange}
          onSizeChange={this.onChange}
          useFlat={true}
        />
      </div>
    );
  }
}
```

### 自定义样式风格

```jsx
import React, { ReactNode } from 'react';
import { Pagination, AnyObj } from '@weapp/ui';
import './index.less';

export default class CustomStyleDemo extends React.PureComponent<{}> {

  onChange = (value: number, pageSize: number) => {
    console.log('onChange', value, pageSize);
  }
  
  customRenderContent = (_: any, ele: ReactNode, customRenderMap: AnyObj) => {
    const { totalContent, pagerContent, sizeChangeContent, jumpContent } = customRenderMap
    return [
      totalContent,
      sizeChangeContent,
      pagerContent,
      jumpContent
    ].filter(i => !!i)
  }

  render() {
    return (
      <Pagination
        defaultValue={1}
        total={500}
        simple={false}
        showTotal={true}
        showJumper={true}
        showSizeChanger={true}
        onChange={this.onChange}
        onSizeChange={this.onChange}
        showFirstLastBtnInForce={true}
        customRenderContent={this.customRenderContent}
        className={'ui-demo-pagination-new'}
      />
    );
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |  |
| --- | --- | --- | --- | --- | --- |
| className | class 名 | string | 否 |  |  |
| style | 样式 | CSSProperties | 否 |  |  |
| customRender | 自定义组件渲染 | (props: any, ele: ReactElement) => ReactElement | 否 |  |  |
| value | 当前页数 | number | 否 |  |  |
| defaultValue | 默认的当前页数 | number | 否 | 1 |  |
| pageSize | 每条页数 | number | 否 |  |  |
| defaultPageSize | 默认的每页条数 | number | 否 | 10 |  |
| total | 数据总数 | number | 是 |  |  |
| collapsed | 展开收起状态(浏览按钮专用) | boolean | 否 |  |  |
| defaultCollapsed | 默认展开收起状态(浏览按钮专用) | boolean | 否 | true |  |
| allPages | 外部强制指定总页数,默认是通过 total 和 pageSize 计算的 | number | 否 |  |  |
| simple | 是否为页码简单化显示 | boolean | 否 | true |  |
| useFlat | 是否为平铺展示显示 | boolean | 否 | false |  |
| pageSizeOptions | 指定每页可以显示多少条 | number[] | 否 | [10, 20, 50, 100] |  |
| showTotal | 是否显示总数 | boolean | 否 | true |  |
| showJumper | 是否显示跳转到某页 | boolean | 否 | false |  |
| showSizeChanger | 是否显示页数切换器 | boolean | 否 | false |  |
| showFullSizeOptionLabel | 是否显示完整size标签（选中项显示完整文本（10 条 / 页、20 条 / 页）） | boolean | 否 | false |  |
| showCollapsed | 是否显示展开收起按钮(浏览按钮专用) | boolean | 否 | false |  |
| showLessItems | 是否显示较少页数(为 true 则前后切换 3 页, 默认为 5 页) | boolean | 否 | false |  |
| selectProps | 页面切换器的配置,继承 select 组件 | SelectProps | 否 |  |  |
| pageLimit | 铺开分页最多显示的页码数 | number | 否 |  |  |
| onChange | 页码改变的回调, 参数是改变后的页码及每页条数 | (value: number, pageSize: number) => void | 否 |  |  |
| onSizeChange | pageSize 变化的回调, 参数是改变后的页码及每页条数 | (value: number, pageSize: number) => void | 否 |  |  |
| onCollapsedChange | 展开收起状态改变的回调(浏览按钮专用) | (collopsed: boolean) => void | 否 |  |  |
