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>