# 分页器

## 案例演示

### Pagination 基本使用

---demo
```js
import { Pagination } from 'amos-framework';

const onPageChange = (page) => {
  console.log(page);
}

const onChange = (pageInfo, pageNum) => {
  console.log('onChange:', pageInfo, pageNum);
}

ReactDOM.render((
  <Pagination
    currentPage={1}
    totalPageNum={200}
    pageSize={10}
    maxSeries={4}
    onChange={onChange}
    onPageChange={onPageChange}
  />
), _react_runner_);
```
---demoend

### Pagination 精简使用

---demo
```js
import { Pagination } from 'amos-framework';

const onPageChange = (page) => {
  console.log(page);
}

ReactDOM.render((
  <Pagination
    currentPage={1}
    totalPageNum={200}
    pageSize={10}
    maxSeries={4}
    hideJumper
    hideSizeChanger
    hideAssistant
    onPageChange={onPageChange}
  />
), _react_runner_);
```
---demoend

### Pagination 自定义分页选择

---demo
```js
import { Pagination } from 'amos-framework';

const onPageChange = (page) => {
  console.log(page);
}

ReactDOM.render((
  <Pagination
    currentPage={1}
    totalPageNum={200}
    pageSizeOptions={[5, 10, 15, 20]}
    pageSize={10}
    maxSeries={4}
    onPageChange={onPageChange}
  />
), _react_runner_);
```
---demoend


### Pagination 当只有一页时隐藏分页

当只有一页时，通过设置 hideOnSinglePage 属性来隐藏分页。设置为 true 时，当 `totalPageNum <= pageSize` 时，则会自动隐藏分页

---demo
```js
import { Pagination, Switch } from 'amos-framework';

const onPageChange = (page) => {
  console.log(page);
}

const onChange = (pageInfo, pageNum) => {
  console.log('onChange:', pageInfo, pageNum);
}

class MyDemo extends Component {
  state = {
    hide: false
  };

  render() {
    const { hide } = this.state;
    return (
      <div>
        <Switch onOff={hide} onChange={onOff => this.setState({ hide: onOff })}/>
        <Pagination
          hideOnSinglePage={hide}
          currentPage={1}
          totalPageNum={10}
          pageSize={10}
          maxSeries={4}
          onChange={onChange}
          onPageChange={onPageChange}
        />
      </div>
    );
  }
}

ReactDOM.render(<MyDemo />, _react_runner_);
```
---demoend

### Pagination.Paper 基本使用

---demo
```js
import { Pagination, Icon } from 'amos-framework';

const Paper = Pagination.Paper;

const PER_PAGE = 10;
const TOTAL_COUNT = 450;

const fields = [
  { key: '--item-background-normal', label: 'item正常背景色', type: 'iptColor'},
  { key: '--item-background-active', label: 'item选中背景色', type: 'iptColor'},
  { key: '--item-background-hover', label: 'item鼠标悬浮背景色', type: 'iptColor'},
  { key: '--item-border-color-active', label: 'item选中边框颜色', type: 'iptColor'},
  { key: '--item-color-normal', label: 'item正常字体颜色', type: 'iptColor'},
  { key: '--item-color-active', label: 'item选中字体颜色', type: 'iptColor'},
]

class Demo extends Component {

  state = {
    currentPage: 1,
    cssVars: {
    '--item-background-normal': 'white',
    '--item-background-active': '#1a4fa3',
    '--item-background-hover': '#345fa6',
    '--item-border-color-active': '#1a4fa3',
    '--item-color-normal': '#666',
    '--item-color-active': 'white'
    }
  };

  onPageChange = (page) => {
    this.setState({ currentPage: page });
  }

  handleCssVarChange = (cssVars) => {
    this.setState({ cssVars });
  }

  render() {
    const { currentPage, cssVars } = this.state;
    return (
      <div>
        <CSSVarTool fields={fields} cssVars={cssVars} onChange={this.handleCssVarChange} />
        <Paper
          currentPage={currentPage}
          pageSize={PER_PAGE}
          totalPageNum={TOTAL_COUNT}
          onChange={this.onPageChange}
          cssVars={cssVars}
        />
        <br />
        <Paper
          hideDisabled
          currentPage={currentPage}
          pageSize={PER_PAGE}
          totalPageNum={TOTAL_COUNT}
          onChange={this.onPageChange}
          cssVars={cssVars}
        />
        <br />
        <Paper
          maxSeries={10}
          currentPage={currentPage}
          pageSize={PER_PAGE}
          totalPageNum={TOTAL_COUNT}
          onChange={this.onPageChange}
        />
        <br />
        <Paper
          prevLabel='prev'
          nextLabel='next'
          firstPageLabel='first'
          lastPageLabel='last'
          currentPage={currentPage}
          pageSize={PER_PAGE}
          totalPageNum={TOTAL_COUNT}
          onChange={this.onPageChange}
        />
        <br />
        <Paper
          firstPageLabel={<Icon icon='double-left'/>}
          lastPageLabel={<Icon icon='double-right'/>}
          prevLabel={<Icon icon="left" />}
          nextLabel={<Icon icon="right" />}
          currentPage={currentPage}
          pageSize={PER_PAGE}
          totalPageNum={TOTAL_COUNT}
          onChange={this.onPageChange}
        />
        <br />
        <Paper
          hideNavigation
          maxSeries={10}
          currentPage={currentPage}
          pageSize={PER_PAGE}
          totalPageNum={TOTAL_COUNT}
          onChange={this.onPageChange}
        />
        <br />
        <Paper
          hideFirstLastPages
          maxSeries={10}
          currentPage={currentPage}
          pageSize={PER_PAGE}
          totalPageNum={TOTAL_COUNT}
          onChange={this.onPageChange}
        />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### Pagination.Paper 自定义控制器

---demo
```js
import { Pagination, Icon } from 'amos-framework';

const Paper = Pagination.Paper;

const PER_PAGE = 10;
const TOTAL_COUNT = 450;

class Demo extends Component {

  state = {
    goPageNum: '',
    currentPage: 1
  };

  onPageChange = (page) => {
    this.setState({ currentPage: page });
  }

  checkNumber = (e, max) => {
    let value = e.target.value;
    const numberReg = /^\+?[1-9][0-9]*$/;
    if (!numberReg.test(value)) {
      this.setState({
        goPageNum: ''
      });
    } else {
      value = Number(value) > max ? max : value;
      // 跳转时的页码，注意转化为 number 类型
      this.setState({
        goPageNum: Number(value)
      });
    }
  }

  handleKeyUp = (e) => {
    const { goPageNum } = this.state;
    if (e.key === 'Enter') {
      if (goPageNum){
        this.onPageChange(goPageNum);
      }
    }
  }

  // 此处演示功能，直接设置style，项目中使用时，最好采用 className 来控制显示效果
  renderExtra = ({ totalPages }) => {
    const { goPageNum } = this.state;
    return (
      <div style={{ display: 'inline-block' }}>
        <span style={{ marginLeft: 16 }}>共有 {TOTAL_COUNT} 条记录</span>
        <span style={{ marginLeft: 16 }}>共 {totalPages} 页</span>
        <span style={{ display: 'inline-block', marginLeft: 16 }} title="输入页码，回车跳转">
          跳至
            <Input
              onChange={(e) => this.checkNumber(e, totalPages)}
              onKeyUp={this.handleKeyUp}
              value={goPageNum}
              style={{ width: 40 }}
            />
          页
        </span>
      </div>
    );
  }

  render() {
    const { currentPage } = this.state;
    return (
      <div>
        <Paper
          firstPageLabel={<Icon icon='double-left'/>}
          lastPageLabel={<Icon icon='double-right'/>}
          prevLabel={<Icon icon='left'/>}
          nextLabel={<Icon icon='right'/>}
          currentPage={currentPage}
          pageSize={PER_PAGE}
          totalPageNum={TOTAL_COUNT}
          onChange={this.onPageChange}
          renderExtra={this.renderExtra}
          style={{ verticalAlign: 'middle' }}
        />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### Pagination.Paper 当只有一页时隐藏分页

当只有一页时，通过设置 hideOnSinglePage 属性来隐藏分页。设置为 true 时，当 `totalPageNum <= pageSize` 时，则会自动隐藏分页

---demo
```js
import { Pagination, Switch } from 'amos-framework';

const Paper = Pagination.Paper;

const onPageChange = (page) => {
  console.log(page);
}

class MyDemo extends Component {
  state = {
    hide: false
  };

  render() {
    const { hide } = this.state;
    return (
      <div>
        <Switch onOff={hide} onChange={onOff => this.setState({ hide: onOff })}/>
        <Paper
          hideOnSinglePage={hide}
          currentPage={1}
          pageSize={10}
          totalPageNum={10}
          onChange={onPageChange}
        />
      </div>
    );
  }
}

ReactDOM.render(<MyDemo />, _react_runner_);
```
---demoend

### Pagination.Paper 精简使用

只显示上一页和下一页，当分页只有一页时，不显示分页。

---demo
```js
import { Pagination, Switch, InputNumber, Flex } from 'amos-framework';

const Paper = Pagination.Paper;

const infos = (page) => `页码：${page}， 内容：${Math.random() * page}`;

class MyDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPage: 1,
      totalPageNum: 20,
      hide: false,
      content: infos(1)
    };
  }

  onPageChange = (page) => {
    console.log(page);
    this.setState({
      currentPage: page,
      content: infos(page)
    });
  }

  render() {
    const { hide, totalPageNum, currentPage, content } = this.state;
    return (
      <div>
        <Switch onOff={hide} onChange={onOff => this.setState({ hide: onOff })}/>
        <Flex vertical>
          <div>{content}</div>
          <Paper
            hideOnSinglePage={hide}
            hidePageItem
            currentPage={currentPage}
            pageSize={10}
            totalPageNum={totalPageNum}
            onChange={this.onPageChange}
          />
        </Flex>
      </div>
    );
  }
}

ReactDOM.render(<MyDemo />, _react_runner_);
```
---demoend

## Props

### Pagination props

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| prefixCls | string | `amos-pagination` | 自定义样式前缀 |
| className | string | - | 自定义样式，该样式作用于最外层的 `Row` 组件 |
| currentPage | number | - | 当前页面 |
| totalPageNum | number | - | 总记录数 |
| pageSize | number | 10 | 每页显示条数 |
| onPageChange | func | - | 页码改变事件， 参数返回被选中的页码 |
| onChange | func | - | 页面改变时回调，参数是分页数 (`currentPage=1&pageSize=10`, `页数`) |
| maxSeries | number | 4 | 连续页码显示的最大个数，默认为4个 |
| hideAssistant | bool | - | 隐藏 辅助信息 |
| hideJumper | bool | - | 隐藏页面跳转功能 |
| hideSizeChanger | bool | - | 隐藏页面大小切换功能 |
| pageSizeOptions | `string[] or number[]` |  `[10, 20, 30, 40]` | 分页器 指定每页可以显示多少条 |
| assistantRender | func | - | 辅助信息渲染逻辑，默认 |
| onPageSizeChange | func | - | 每页条数改变回调, 参数 `(每页条数)` |
| prevLabel | string | `◀` | 上一页显示 label，常见选择 `《＜<«‹〈  ＜﹤` |
| nextLabel | string | `▶` | 下一页显示 label，常见选择 `》＞>»›〉  ＞﹥` |
| goLabel | string | `GO` | 跳至指定页 label |
| hideOnSinglePage | bool | - | 只有一页时是否隐藏分页，设置为 `true` 时，当分页只有一页时，则自动隐藏分页 |
| hidePageItem | bool | - | 隐藏分页项，可用于某些不需要具体的分页项场景， `v1.11.5` 版本新增 |

### Pagination.Paper props

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| prefixCls | string | `amos-paper` | 自定义样式前缀 |
| className | string | - | 自定义样式，该样式作用于 `ul` 节点 |
| style | object | - | 内联样式，该样式作用于 `ul` 节点 |
| wrapClassName | string | `amos-paper-wrap` | 自定义样式，该样式作用于最外层的 `Row` 组件 |
| currentPage | number | - | 当前选中页 页码数 |
| totalPageNum | number | - | 总记录数 |
| onChange | func | - | 当前页切换时的回调事件，参数为被选中页 ：(page) => {} |
| pageSize | number | 10 | 每页显示条数 |
| maxSeries | number | 5 | 页码显示的个数，默认为5个。不包含 `prev, next, first, last` |
| prevLabel | string | `〈` | 上一页显示 label，常见选择 `《＜<«‹〈  ＜﹤` |
| nextLabel | string | `〉` | 下一页显示 label，常见选择 `》＞>»›〉  ＞﹥` |
| lastPageLabel | string | `》` | 最后一页显示 label，常见选择 `《＜<«‹〈  ＜﹤` |
| firstPageLabel | string | `《` | 第一页显示 label，常见选择 `》＞>»›〉  ＞﹥` |
| hideDisabled | bool | - | 隐藏禁用状态的 page item |
| hideNavigation | bool | - | 隐藏上一页、下一页 导航 |
| hideFirstLastPages | bool | - | 隐藏第一页、最后一页 |
| getPageHref | func | `i => '#'` | 给 a 标签设置 href 数据 |
| renderExtra | `func: (pageInfo) => {}` | - | 自定义设置 总数、跳转、每页大小切换 等功能 |
| hideOnSinglePage | bool | - | 只有一页时是否隐藏分页，设置为 `true` 时，当分页只有一页时，则自动隐藏分页 |

```js
const pageInfo = {
  totalPages: number, // 总分页数
  currentPage: number, // 当前选中页码
  firstPage: number, // 当前首页页码
  lastPage: number, // 当前最后一页页码
  previousPage: number, // 上一页页码
  nextPage: number, // 下一页页码
  hasPreviousPage: bool, // 是否可以使用上一页
  hasNextPage: bool, // 是否可以使用下一页
  totalResults: number, // 总数据条数
  results: number, // 当前页总数据条数 （每页总数）
  firstResult: number, // 当前页的第一条数据索引
  lastResult: number // 当前页最后一条数据索引
}
```

内置 CSS 变量如下：

```js
cssVars = {
  '--item-background-normal': 'var(--component-background)',
  '--item-background-active': 'var(--primary-color-deep)',
  '--item-background-hover': 'var(--primary-color)',
  '--item-border-color-active': 'var(--primary-color-deep)',
  '--item-color-normal': '#666',
  '--item-color-active': 'white'
}
```