Pagination 分页
采用分页的形式分隔长列表,每次只加载一个页面。
何时使用
- 当加载/渲染所有数据将花费很多时间时;
- 可切换页码浏览数据。
代码演示
基本
基础分页。
import React from 'react';
import ReactDOM from 'react-dom';
import { Pagination } from 'choerodon-ui';
ReactDOM.render(
<Pagination
defaultCurrent={1}
total={50}
tiny={false}
showTotal={false}
showSizeChanger={false}
/>, document.getElementById('container'));
更多
更多分页。
import React from 'react';
import ReactDOM from 'react-dom';
import { Pagination } from 'choerodon-ui';
ReactDOM.render(
<Pagination
defaultCurrent={6}
total={500}
tiny={false}
showTotal={false}
showSizeChanger={false}
/>, document.getElementById('container'));
改变
改变每页显示条目数。
import React from 'react';
import ReactDOM from 'react-dom';
import { Pagination } from 'choerodon-ui';
function onShowSizeChange(current, pageSize) {
console.log(current, pageSize);
}
ReactDOM.render(
<Pagination
tiny={false}
showSizeChangerLabel={false}
showTotal={false}
onShowSizeChange={onShowSizeChange}
defaultCurrent={3}
total={500}
/>,
document.getElementById('container'));
跳转
快速跳转到某一页。
import React from 'react';
import ReactDOM from 'react-dom';
import { Pagination } from 'choerodon-ui';
function onChange(pageNumber) {
console.log('Page: ', pageNumber);
}
ReactDOM.render(
<Pagination
tiny={false}
showSizeChangerLabel={false}
showTotal={false}
showSizeChanger={false}
showQuickJumper
defaultCurrent={2}
total={500}
onChange={onChange}
/>,
document.getElementById('container'),
);
尺寸
尺寸。
import React from 'react';
import ReactDOM from 'react-dom';
import { Pagination } from 'choerodon-ui';
function showTotal(total) {
return `总共 ${total} 条`;
}
ReactDOM.render(
<div>
<Pagination
tiny={false}
size="large"
total={50}
showTotal={false}
showSizeChanger={false}
/>
<Pagination
tiny={false}
size="large"
total={50}
showTotal={false}
showSizeChanger
showQuickJumper
/>
<Pagination
tiny={false}
size="large"
total={50}
showTotal={showTotal}
showSizeChanger={false}
/>
微型
微型版本。
import React from 'react';
import ReactDOM from 'react-dom';
import { Pagination } from 'choerodon-ui';
function showTotal(total) {
return `总共 ${total} 条`;
}
ReactDOM.render(
<div>
<Pagination total={50} />
<Pagination total={50} showSizeChanger showQuickJumper />
<Pagination total={50} showTotal={showTotal} />
</div>,
document.getElementById('container'),
);
简洁
简单的翻页。
import React from 'react';
import ReactDOM from 'react-dom';
import { Pagination } from 'choerodon-ui';
ReactDOM.render(
<Pagination simple defaultCurrent={2} total={50} />,
document.getElementById('container'));
受控
受控制的页码。
import React from 'react';
import ReactDOM from 'react-dom';
import { Pagination } from 'choerodon-ui';
class App extends React.Component {
state = {
current: 3,
}
onChange = (page) => {
console.log(page);
this.setState({
current: page,
});
}
render() {
return (
<Pagination
current={this.state.current}
onChange={this.onChange}
total={50}
tiny={false}
showTotal={false}
showSizeChanger={false}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('container'));
总数
通过设置 showTotal
展示总共有多少数据。
import React from 'react';
import ReactDOM from 'react-dom';
import { Pagination } from 'choerodon-ui';
ReactDOM.render(
<div>
<Pagination
total={85}
showTotal={(total) => `总共 ${total} 条`}
pageSize={20}
defaultCurrent={1}
tiny={false}
showSizeChanger={false}
/>
<br />
<Pagination
total={85}
showTotal={(total, range) => `${range[0]}-${range[1]} 总共 ${total} 条`}
pageSize={20}
defaultCurrent={1}
tiny={false}
showSizeChanger={false}
/>
</div>,
document.getElementById('container'),
);
上一步和下一步
修改上一步和下一步为文字链接。
import React from 'react';
import ReactDOM from 'react-dom';
import { Pagination } from 'choerodon-ui';
function itemRender(current, type, originalElement) {
if (type === 'prev') {
return <a>Previous</a>;
}
if (type === 'next') {
return <a>Next</a>;
}
return originalElement;
}
ReactDOM.render(
<Pagination tiny={false} showTotal={false} showSizeChanger={false} total={500} itemRender={itemRender} />,
document.getElementById('container'));
API
<Pagination onChange={onChange} total={50} />
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
current | 当前页数 | number | - |
defaultCurrent | 默认的当前页数 | number | 1 |
defaultPageSize | 默认的每页条数 | number | 10 |
hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false |
itemRender | 用于自定义页码的结构,可用于优化 SEO | (page, type: ‘page’ | ‘prev’ | ‘next’, originalElement) => React.ReactNode | - |
pageSize | 每页条数 | number | - |
pageSizeOptions | 指定每页可以显示多少条 | string[] | [‘10’, ‘20’, ‘30’, ‘40’] |
showQuickJumper | 是否可以快速跳转至某页 | boolean | false |
showSizeChanger | 是否可以改变 pageSize | boolean | false |
showTotal | 用于显示数据总量和当前数据顺序 | Function(total, range) | - |
simple | 当添加该属性时,显示为简单分页 | boolean | - |
tiny | 当添加该属性时,显示为简单分页 | boolean | true |
size | 当为「small」时,是小尺寸分页 | string | “” |
total | 数据总数 | number | 0 |
onChange | 页码改变的回调,参数是改变后的页码及每页条数 | Function(page, pageSize) | noop |
onShowSizeChange | pageSize 变化的回调 | Function(current, size) | noop |
当前内容版权归 Choerodon UI 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Choerodon UI .