React EasyUI 分页
分页（ Pagination ）允许用户通过反野导航数据。 分页（ Pagination ）支持页面导航和页面长度选择的可配置选项。 分页（ Pagination ）可在右侧添加自定义按钮增强功能性。
属性列表
| 名称 | 数据类型 | 作用描述 | 默认值 |
|---|---|---|---|
| pageList | number[] | 定义可以更改大小。 | [10,20,30,40,50] |
| loading | boolean | 是否正在加载数据。 | false |
| showPageList | boolean | 是否显示页列表。 | true |
| showPageInfo | boolean | 是否显示页面信息。 | true |
| showPageRefresh | boolean | 是否显示刷新按钮。 | true |
| links | number | 链接数量。 | 10 |
| beforePageText | string | 在输入组件之前显示一个标签。 | Page |
| afterPageText | string | 在输入组件之后显示一个标签。 | of {pages} |
| displayMsg | string | 显示页面信息。 | Displaying {from} to {to} of {total} items |
| layout | string[] | 分页布局定义。可选值是:'list', 'sep', 'first', 'prev', 'sep', 'tpl', 'sep', 'next', 'last', 'sep', 'refresh', 'info', 'links'。 | ['first', 'prev', 'links', 'next', 'last', 'refresh'] |
| pageNumber | number | 初始化页码。 | 1 |
| pageSize | number | 初始化页面大小。 | 10 |
| total | number | 初始化总记录数。 | 0 |
事件列表
| 名称 | 参数 | 作用描述 |
|---|---|---|
| onPageChange | { pageNumber, pageSize } | 当页面更改时触发。 |
注：
- 继承： LocaleBase 。
使用方法
<Panel bodyStyle={{ padding: 20 }}
footer={() => (
<Pagination
{...this.state}
onPageChange={event => this.setState(event)}
/>
)}
>
<p>Total: {total}</p>
<p>Page Number: {pageNumber}</p>
<p>Page Size: {pageSize}</p>
</Panel>