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
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
total | 总数 | number | |
page | 当前页 | number | |
pageSize | 分页数 | number | |
onChange | 页码改变的回调,参数是改变后的页码及每页条数 | (page, pageSize) => void | |
pageSizeOptions | 指定每页可以显示多少条 | string[] | [‘10’, ‘20’, ‘50’, ‘100’] |
showQuickJumper | 是否显示快速跳转至某页 | boolean | { goButton: ReactNode } | false |
hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false |
showSizeChanger | 是否显示分页大小选择器 | boolean | true |
showSizeChangerLabel | 是否显示分页大小选择器的标签 | boolean | true |
showTotal | 显示总数,当传入 function 时可自定义显示数据总量和当前数据顺序 | boolean | Function(total, range) | true |
showPager | 显示数字按钮 | boolean | false |
itemRender | 按钮渲染。type - 按钮类型,可选值:first | last | prev | next | jump-prev | jump-next | (page, type) => ReactNode | |
sizeChangerPosition | 分页大小选择器的位置,可选值: left | right | string | left |
sizeChangerOptionRenderer | 分页大小选择器的选项渲染器 | ({ dataSet, record, text, value}) => ReactNode | ({ text }) => text |
更多属性请参考 ViewComponent。
当前内容版权归 Choerodon UI 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Choerodon UI .