Pagination 分页

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

何时使用

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

代码演示

基本

基础分页。

Pagination分页 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Pagination } from 'choerodon-ui';
  4. ReactDOM.render(
  5. <Pagination
  6. defaultCurrent={1}
  7. total={50}
  8. tiny={false}
  9. showTotal={false}
  10. showSizeChanger={false}
  11. />, document.getElementById('container'));

更多

更多分页。

Pagination分页 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Pagination } from 'choerodon-ui';
  4. ReactDOM.render(
  5. <Pagination
  6. defaultCurrent={6}
  7. total={500}
  8. tiny={false}
  9. showTotal={false}
  10. showSizeChanger={false}
  11. />, document.getElementById('container'));

改变

改变每页显示条目数。

Pagination分页 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Pagination } from 'choerodon-ui';
  4. function onShowSizeChange(current, pageSize) {
  5. console.log(current, pageSize);
  6. }
  7. ReactDOM.render(
  8. <Pagination
  9. tiny={false}
  10. showSizeChangerLabel={false}
  11. showTotal={false}
  12. onShowSizeChange={onShowSizeChange}
  13. defaultCurrent={3}
  14. total={500}
  15. />,
  16. document.getElementById('container'));

跳转

快速跳转到某一页。

Pagination分页 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Pagination } from 'choerodon-ui';
  4. function onChange(pageNumber) {
  5. console.log('Page: ', pageNumber);
  6. }
  7. ReactDOM.render(
  8. <Pagination
  9. tiny={false}
  10. showSizeChangerLabel={false}
  11. showTotal={false}
  12. showSizeChanger={false}
  13. showQuickJumper
  14. defaultCurrent={2}
  15. total={500}
  16. onChange={onChange}
  17. />,
  18. document.getElementById('container'),
  19. );

尺寸

尺寸。

Pagination分页 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Pagination } from 'choerodon-ui';
  4. function showTotal(total) {
  5. return `总共 ${total} 条`;
  6. }
  7. ReactDOM.render(
  8. <div>
  9. <Pagination
  10. tiny={false}
  11. size="large"
  12. total={50}
  13. showTotal={false}
  14. showSizeChanger={false}
  15. />
  16. <Pagination
  17. tiny={false}
  18. size="large"
  19. total={50}
  20. showTotal={false}
  21. showSizeChanger
  22. showQuickJumper
  23. />
  24. <Pagination
  25. tiny={false}
  26. size="large"
  27. total={50}
  28. showTotal={showTotal}
  29. showSizeChanger={false}
  30. />

微型

微型版本。

Pagination分页 - 图6

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Pagination } from 'choerodon-ui';
  4. function showTotal(total) {
  5. return `总共 ${total} 条`;
  6. }
  7. ReactDOM.render(
  8. <div>
  9. <Pagination total={50} />
  10. <Pagination total={50} showSizeChanger showQuickJumper />
  11. <Pagination total={50} showTotal={showTotal} />
  12. </div>,
  13. document.getElementById('container'),
  14. );

简洁

简单的翻页。

Pagination分页 - 图7

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Pagination } from 'choerodon-ui';
  4. ReactDOM.render(
  5. <Pagination simple defaultCurrent={2} total={50} />,
  6. document.getElementById('container'));

受控

受控制的页码。

Pagination分页 - 图8

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

总数

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

Pagination分页 - 图9

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Pagination } from 'choerodon-ui';
  4. ReactDOM.render(
  5. <div>
  6. <Pagination
  7. total={85}
  8. showTotal={(total) => `总共 ${total} 条`}
  9. pageSize={20}
  10. defaultCurrent={1}
  11. tiny={false}
  12. showSizeChanger={false}
  13. />
  14. <br />
  15. <Pagination
  16. total={85}
  17. showTotal={(total, range) => `${range[0]}-${range[1]} 总共 ${total} 条`}
  18. pageSize={20}
  19. defaultCurrent={1}
  20. tiny={false}
  21. showSizeChanger={false}
  22. />
  23. </div>,
  24. document.getElementById('container'),
  25. );

上一步和下一步

修改上一步和下一步为文字链接。

Pagination分页 - 图10

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Pagination } from 'choerodon-ui';
  4. function itemRender(current, type, originalElement) {
  5. if (type === 'prev') {
  6. return <a>Previous</a>;
  7. }
  8. if (type === 'next') {
  9. return <a>Next</a>;
  10. }
  11. return originalElement;
  12. }
  13. ReactDOM.render(
  14. <Pagination tiny={false} showTotal={false} showSizeChanger={false} total={500} itemRender={itemRender} />,
  15. document.getElementById('container'));

API

  1. <Pagination onChange={onChange} total={50} />
参数说明类型默认值
current当前页数number-
defaultCurrent默认的当前页数number1
defaultPageSize默认的每页条数number10
hideOnSinglePage只有一页时是否隐藏分页器booleanfalse
itemRender用于自定义页码的结构,可用于优化 SEO(page, type: ‘page’ | ‘prev’ | ‘next’, originalElement) => React.ReactNode-
pageSize每页条数number-
pageSizeOptions指定每页可以显示多少条string[][‘10’, ‘20’, ‘30’, ‘40’]
showQuickJumper是否可以快速跳转至某页booleanfalse
showSizeChanger是否可以改变 pageSizebooleanfalse
showTotal用于显示数据总量和当前数据顺序Function(total, range)-
simple当添加该属性时,显示为简单分页boolean-
tiny当添加该属性时,显示为简单分页booleantrue
size当为「small」时,是小尺寸分页string“”
total数据总数number0
onChange页码改变的回调,参数是改变后的页码及每页条数Function(page, pageSize)noop
onShowSizeChangepageSize 变化的回调Function(current, size)noop