<commit_before>## Pagination 分页

分页组件

### 使用指南

- 展示条目的总数量必须已知

### 代码演示

:::demo 基础用法
```js
import { Pagination } from 'zent';

class Basic extends Component {
  constructor() {
    super();

    this.state = {
      current: 1,
      totalItem: 1000
    };
  }

  render() {
    return (
      <Pagination
        current={this.state.current}
        totalItem={this.state.totalItem}
        onChange={this.onChange}
        maxPageToShow={12}
      />
    );
  }

  onChange = (page) => {
    this.setState({
      current: page
    });
  };
}

ReactDOM.render(
  <Basic />
  , mountNode
);
```
:::

:::demo 动态 PageSize
```js
import { Pagination } from 'zent';

class Dynamic extends Component {
  constructor() {
    super();

    this.state = {
      current: 1,
      totalItem: 1000
    };
  }

  render() {
    return (
      <Pagination
        current={this.state.current}
        totalItem={this.state.totalItem}
        onChange={this.onChange}
        pageSize={[20, { value: 30, isCurrent: true }]}
      />
    );
  }

  onChange = (page) => {
    this.setState({
      current: page
    });
  }
}

ReactDOM.render(
  <Dynamic />
  , mountNode
);
```
:::

:::demo 海量页数
```js
import { Pagination } from 'zent';

class HugeTotal extends Component {
  constructor() {
    super();

    this.state = {
      current: 1321,
      totalItem: 10000000000000,
      pageSize: 10
    }
  }

  render() {
    return (
      <Pagination
        current={this.state.current}
        totalItem={this.state.totalItem}
        pageSize={this.state.pageSize}
        onChange={this.onChange}
      />
    );
  }

  onChange = (page) => {
    this.setState({
      current: page
    });
  }
}

ReactDOM.render(
  <HugeTotal />
  , mountNode
);
```
:::

:::demo 自定义
```js
class Custom extends Component {
  constructor(props) {
    super();

    this.state = {
      current: 1,
      pageSize: 10,
      totalItem: 1000,
      max: 100
    }
  }

  render() {
    return (
      <div>
        <form>
          <div className="form-group">
            <label>totalItem:</label>
            <input type="text" className="form-control" placeholder="数字" value={this.state.totalItem} onChange={this.onTotalChange} />
          </div>
          <div className="form-group">
            <label>pageSize:</label>
            <input type="text" className="form-control" placeholder="数字" value={this.state.pageSize} onChange={this.onPageSizeChange} />
          </div><commit_msg>doc: remove constructors in README<commit_after>## Pagination 分页

分页组件

### 使用指南

- 展示条目的总数量必须已知

### 代码演示

:::demo 基础用法
```js
import { Pagination } from 'zent';

class Basic extends Component {
  state = {
    current: 1,
    totalItem: 1000
  }

  render() {
    return (
      <Pagination
        current={this.state.current}
        totalItem={this.state.totalItem}
        onChange={this.onChange}
        maxPageToShow={12}
      />
    );
  }

  onChange = (page) => {
    this.setState({
      current: page
    });
  };
}

ReactDOM.render(
  <Basic />
  , mountNode
);
```
:::

:::demo 动态 PageSize
```js
import { Pagination } from 'zent';

class Dynamic extends Component {
  state = {
    current: 1,
    totalItem: 1000
  };

  render() {
    return (
      <Pagination
        current={this.state.current}
        totalItem={this.state.totalItem}
        onChange={this.onChange}
        pageSize={[20, { value: 30, isCurrent: true }]}
      />
    );
  }

  onChange = (page) => {
    this.setState({
      current: page
    });
  }
}

ReactDOM.render(
  <Dynamic />
  , mountNode
);
```
:::

:::demo 海量页数
```js
import { Pagination } from 'zent';

class HugeTotal extends Component {
  state = {
    current: 1321,
    totalItem: 10000000000000,
    pageSize: 10
  }

  render() {
    return (
      <Pagination
        current={this.state.current}
        totalItem={this.state.totalItem}
        pageSize={this.state.pageSize}
        onChange={this.onChange}
      />
    );
  }

  onChange = (page) => {
    this.setState({
      current: page
    });
  }
}

ReactDOM.render(
  <HugeTotal />
  , mountNode
);
```
:::

:::demo 自定义
```js
class Custom extends Component {
  state = {
    current: 1,
    pageSize: 10,
    totalItem: 1000,
    max: 100
  }

  render() {
    return (
      <div>
        <form>
          <div className="form-group">
            <label>totalItem:</label>
            <input type="text" className="form-control" placeholder="数字" value={this.state.totalItem} onChange={this.onTotalChange} />
          </div>
          <div className="form-group">
            <label>pageSize:</label>
            <input type="text" className="form-control" placeholder="数字" value={this.state.pageSize} onChange={this.onPageSizeChange} />
          </div>
{'fraction_non_alphanumeric': 0.15323089875815618, 'fraction_numerical': 0.0193643443485582, 'mean_word_length': 2.195696032279758, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 45, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 2, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3499147', 'n_tokens_mistral': 1727, 'n_tokens_neox': 1658, 'n_words': 305}