Pagination 分页

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

何时使用

• 当加载/渲染所有数据将花费很多时间时；
• 可切换页码浏览数据。

代码演示

基本使用

基本使用。

​
import React from 'react';
import ReactDOM from 'react-dom';
import {
  Form,
  Switch,
  DataSet,
  Pagination,
  NumberField,
} 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',

总数

通过设置 showTotal 展示总共有多少数据

import React from 'react';
import ReactDOM from 'react-dom';
import { Form, Switch, DataSet, Pagination, NumberField, Button } from 'choerodon-ui/pro';
import { observer } from 'mobx-react';
​
function handleChange(page, pageSize) {
  console.log('[pagination]', page, pageSize);
}
​
class App extends React.Component {
​
  render() {
    return (
      <div>
        <Pagination
          showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} 页`}
          total={90}
          onChange={handleChange}
        />
        <br />
        <Pagination
          total={95}
          showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
        />
      </div>
    );
  }
}
​
ReactDOM.render(<App />, document.getElementById('container'));
​

受控

受控

import React from 'react';
import ReactDOM from 'react-dom';
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 />,
  document.getElementById('container')
);
​

跳转

快速跳转到某一页。

import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Pagination, Button } from 'choerodon-ui/pro';
​
function handleChange(page, pageSize) {
  console.log('[pagination]', page, pageSize);
}
​
class App extends React.Component {
​
  render() {
    return (
      <Pagination
        showQuickJumper={{goButton: <Button type="button">跳转</Button>}}
        total={90}
        onChange={handleChange}
      />)
  }
}
​
ReactDOM.render(
  <App />,
  document.getElementById('container')
);
​

数据源

绑定数据源。

import React from 'react';
import ReactDOM from 'react-dom';
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 />,
  document.getElementById('container')
);
​

Hzero定制

Hzero 定制。

​
import React from 'react';
import ReactDOM from 'react-dom';
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}

API

Pagination

更多属性请参考 ViewComponent。