sourcecode/front/project/www/components/UserPagination/index.js

import React, { Component } from 'react';
import './index.less';
import Icon from '../Icon';
import Select from '../Select';

export default class extends Component {
  onChangePage(page) {
    const { total, pageSize, onChange } = this.props;
    const all = Math.ceil(total / pageSize);
    if (page <= 0 || page > all) return;
    if (onChange) onChange(page);
  }

  render() {
    const { current, total, pageSize, jump } = this.props;
    const all = Math.ceil(total / pageSize);
    return (
      <div className="user-pagination">
        <Icon name="arrow-left-small" onClick={() => this.onChangePage(current - 1)} />
        <span>
          <b>{current}</b>/{all}
        </span>
        <Icon name="arrow-right-small" onClick={() => this.onChangePage(current + 1)} />
        {jump && (
          <div style={{ display: 'inline-block' }} className="m-l-2 v-a-m">
            <div style={{ display: 'inline-block' }} className="v-a-m">
              跳转至
            </div>
            <Select
              size="small"
              theme="white"
              value={current}
              list={all > 0 ? [...Array(all)].map((key, index) => ({ title: `第${index + 1}页`, key: index + 1 })) : []}
              onChange={({ key }) => this.onChangePage(key)}
            />
          </div>
        )}
      </div>
    );
  }
}