Pagination分页

采用分页的形式分隔长列表，每次只加载一个页面。

何时使用

• 当加载/渲染所有数据将花费很多时间时；

• 可切换页码浏览数据。

代码演示

基本使用

基本使用。

import { Form, Switch, DataSet, Pagination } from 'choerodon-ui/pro';
import { observer } from 'mobx-react';
function handleChange(page, pageSize) {
  console.log('[pagination]', page, pageSize);
}
@observer
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [
      { name: 'showSizeChanger', type: 'boolean', label: 'showSizeChanger', defaultValue: true },
      { name: 'showTotal', type: 'boolean', label: 'showTotal', defaultValue: true },
      { name: 'showPager', type: 'boolean', label: 'showPager', defaultValue: false },
      { name: 'showQuickJumper', type: 'boolean', label: 'showQuickJumper', defaultValue: false },
    ],
  });
  render() {
    const {
      ds,
      ds: { current },
    } = this;
    return (
      <div>
        <Form columns={4} dataSet={ds} labelWidth={150}>
          <Switch name="showSizeChanger" />
          <Switch name="showTotal" />
          <Switch name="showPager" />
          <Switch name="showQuickJumper" />
        </Form>
        <Pagination
          showSizeChanger={current.get('showSizeChanger')}
          showTotal={current.get('showTotal')}
          showPager={current.get('showPager')}
          showQuickJumper={current.get('showQuickJumper')}
          total={90}
          onChange={handleChange}
        />
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

受控输入框

受控输入框

import { Pagination } from 'choerodon-ui/pro';
class App extends React.Component {
  state = {
    page: 2,
    pageSize: 20,
  }
  handleChange = (page, pageSize) => {
    console.log('[page]', page, '[pageSize]', pageSize);
    this.setState({
      page,
      pageSize,
    });
  }
  render() {
    const { page, pageSize } = this.state;
    return <Pagination total={50} page={page} pageSize={pageSize} onChange={this.handleChange} />;
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

数据源

绑定数据源。

import { DataSet, Pagination } from 'choerodon-ui/pro';
class App extends React.Component {
  ds = new DataSet({
    autoQuery: true,
    name: 'user',
    pageSize: 20,
  });
  render() {
    return <Pagination dataSet={this.ds} />;
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

Hzero定制

Hzero 定制。

import { Form, Switch, DataSet, Pagination, Icon } from 'choerodon-ui/pro';
function pagerRenderer(page, type) {
  switch (type) {
    case 'first':
      return <Icon type="fast_rewind" />;
    case 'last':
      return <Icon type="fast_forward" />;
    case 'prev':
      return <Icon type="navigate_before" />;
    case 'next':
      return <Icon type="navigate_next" />;
    case 'jump-prev':
    case 'jump-next':
      return '•••';
    default:
      return page;
  }
}
function sizeChangerRenderer({ text }) {
  return `${text} 条/页`;
}
ReactDOM.render(
  <Pagination
    showSizeChangerLabel={false}
    showTotal={false}
    showPager
    showQuickJumper
    sizeChangerPosition="right"
    sizeChangerOptionRenderer={sizeChangerRenderer}
    itemRender={pagerRenderer}
    total={50}
    pageSize={10}
    page={1}
  />,
  mountNode,
);

API

Pagination

更多属性请参考 DataSetComponent。