Pagination 分页

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

何时使用

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

代码演示

基本使用

基本使用。

Pagination分页 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import {
  4. Form,
  5. Switch,
  6. DataSet,
  7. Pagination,
  8. NumberField,
  9. } from 'choerodon-ui/pro';
  10. import { observer } from 'mobx-react';
  11. function handleChange(page, pageSize) {
  12. console.log('[pagination]', page, pageSize);
  13. }
  14. @observer
  15. class App extends React.Component {
  16. ds = new DataSet({
  17. autoCreate: true,
  18. fields: [
  19. {
  20. name: 'showSizeChanger',
  21. type: 'boolean',
  22. label: 'showSizeChanger',
  23. defaultValue: true,
  24. },
  25. {
  26. name: 'showTotal',
  27. type: 'boolean',
  28. label: 'showTotal',
  29. defaultValue: true,
  30. },
  31. {
  32. name: 'showPager',

总数

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

Pagination分页 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Form, Switch, DataSet, Pagination, NumberField, Button } from 'choerodon-ui/pro';
  4. import { observer } from 'mobx-react';
  5. function handleChange(page, pageSize) {
  6. console.log('[pagination]', page, pageSize);
  7. }
  8. class App extends React.Component {
  9. render() {
  10. return (
  11. <div>
  12. <Pagination
  13. showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} 页`}
  14. total={90}
  15. onChange={handleChange}
  16. />
  17. <br />
  18. <Pagination
  19. total={95}
  20. showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
  21. />
  22. </div>
  23. );
  24. }
  25. }
  26. ReactDOM.render(<App />, document.getElementById('container'));

受控

受控

Pagination分页 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Pagination } from 'choerodon-ui/pro';
  4. class App extends React.Component {
  5. state = {
  6. page: 2,
  7. pageSize: 20,
  8. }
  9. handleChange = (page, pageSize) => {
  10. console.log('[page]', page, '[pageSize]', pageSize);
  11. this.setState({
  12. page,
  13. pageSize,
  14. });
  15. }
  16. render() {
  17. const { page, pageSize } = this.state;
  18. return <Pagination total={50} page={page} pageSize={pageSize} onChange={this.handleChange} />;
  19. }
  20. }
  21. ReactDOM.render(
  22. <App />,
  23. document.getElementById('container')
  24. );

跳转

快速跳转到某一页。

Pagination分页 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, Pagination, Button } from 'choerodon-ui/pro';
  4. function handleChange(page, pageSize) {
  5. console.log('[pagination]', page, pageSize);
  6. }
  7. class App extends React.Component {
  8. render() {
  9. return (
  10. <Pagination
  11. showQuickJumper={{goButton: <Button type="button">跳转</Button>}}
  12. total={90}
  13. onChange={handleChange}
  14. />)
  15. }
  16. }
  17. ReactDOM.render(
  18. <App />,
  19. document.getElementById('container')
  20. );

数据源

绑定数据源。

Pagination分页 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, Pagination } from 'choerodon-ui/pro';
  4. class App extends React.Component {
  5. ds = new DataSet({
  6. autoQuery: true,
  7. name: 'user',
  8. pageSize: 20,
  9. });
  10. render() {
  11. return <Pagination dataSet={this.ds} />;
  12. }
  13. }
  14. ReactDOM.render(
  15. <App />,
  16. document.getElementById('container')
  17. );

Hzero定制

Hzero 定制。

Pagination分页 - 图6

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Form, Switch, DataSet, Pagination, Icon } from 'choerodon-ui/pro';
  4. function pagerRenderer(page, type) {
  5. switch (type) {
  6. case 'first':
  7. return <Icon type="fast_rewind" />;
  8. case 'last':
  9. return <Icon type="fast_forward" />;
  10. case 'prev':
  11. return <Icon type="navigate_before" />;
  12. case 'next':
  13. return <Icon type="navigate_next" />;
  14. case 'jump-prev':
  15. case 'jump-next':
  16. return '•••';
  17. default:
  18. return page;
  19. }
  20. }
  21. function sizeChangerRenderer({ text }) {
  22. return `${text} 条/页`;
  23. }
  24. ReactDOM.render(
  25. <Pagination
  26. showSizeChangerLabel={false}

API

Pagination

参数说明类型默认值
total总数number
page当前页number
pageSize分页数number
onChange页码改变的回调,参数是改变后的页码及每页条数(page, pageSize) => void
pageSizeOptions指定每页可以显示多少条string[][‘10’, ‘20’, ‘50’, ‘100’]
showQuickJumper是否显示快速跳转至某页boolean | { goButton: ReactNode }false
hideOnSinglePage只有一页时是否隐藏分页器booleanfalse
showSizeChanger是否显示分页大小选择器booleantrue
showSizeChangerLabel是否显示分页大小选择器的标签booleantrue
showTotal显示总数,当传入 function 时可自定义显示数据总量和当前数据顺序boolean | Function(total, range)true
showPager显示数字按钮booleanfalse
itemRender按钮渲染。type - 按钮类型,可选值:first | last | prev | next | jump-prev | jump-next(page, type) => ReactNode
sizeChangerPosition分页大小选择器的位置,可选值: left | rightstringleft
sizeChangerOptionRenderer分页大小选择器的选项渲染器({ dataSet, record, text, value}) => ReactNode({ text }) => text

更多属性请参考 ViewComponent