Angular 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	显示页面信息。	显示{total}项的{from} to {to}
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

事件列表

名称	参数	作用描述
pageChange	pageNumber:number, pageSize:number	当页面更改时触发。

注：
- 继承： None 。
- 选择器： eui-pagination 。

使用方法

<eui-panel [bodyStyle]="{padding:'20px'}">
    <p>Total: {{total}}</p>
    <p>Page Number: {{pageNumber}}</p>
    <p>Page Size: {{pageSize}}</p>
    <eui-panel-footer>
        <eui-pagination [total]="total" [pageSize]="pageSize" [pageNumber]="pageNumber" (pageChange)="onPageChange($event)"></eui-pagination>
    </eui-panel-footer>
</eui-panel>