essence-ng2-pagination
v1.0.4
Published
essence-ng2-pagination is a pagination component for Angular.
Downloads
10
Maintainers
Readme
essence-ng2-pagination
essence-ng2-pagination is a pagination component for Angular.
Usage
Install
npm install --save essence-ng2-pagination@latest
Set in the .angular-cli.json(@angular/cli)
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ]
Add the EssenceNg2PaginationModule
import {EssenceNg2PaginationModule} from "essence-ng2-pagination"; @NgModule({ imports: [ EssenceNg2PaginationModule ] })
Use in the template
<h2>复杂分页</h2> <essence-ng2-pagination [totalItems]="totalItems" [(ngModel)]="currentPage" [maxSize]="maxSize" [itemsPerPage]="itemsPerPage" class="pagination-lg" [boundaryLinks]="true" [rotate]="false" previousText="上一页" nextText="下一页" firstText="首页" lastText="尾页" (pageChanged)="pageChanged($event)"> </essence-ng2-pagination> <h2>简单分页</h2> <essence-ng2-pager [totalItems]="totalItems" [(ngModel)]="currentPage" [itemsPerPage]="itemsPerPage" class="pagination-lg" previousText="上一页" nextText="下一页" (pageChanged)="pageChanged($event)"> </essence-ng2-pager>
Use in the component
maxSize: number = 5; currentPage: number = 1; itemsPerPage: number = 20; // 每页条数 totalItems: number = 200; // 总数 pageChanged (event: any): void { console.log(event); };
API
Inputs
Pagination
rotate
(?boolean=true
) - 如果为true
则当前页始终在分页列表的中间disabled
(?boolean=false
) - 如果为true
则分页组件将被禁用totalItems
(number
) - 总项目数itemsPerPage
(?number=10
) - 每页的项目数, 如果小于1将在一页显示所有的项目数maxSize
(?number=5
) - 最大显示的分页链接数boundaryLinks
(?boolean=true
) - 如果为false
则首页和末页的按钮将隐藏directionLinks
(?boolean=true
) - 如果为false
则上一页和下一页的按钮将隐藏previousText
(?string='上一页'
) - 上一页按钮显示的文本nextText
(?string='下一页'
) - 下一页按钮显示的文本firstText
(?string='首页'
) - 首页按钮显示的文本lastText
(?string='末页'
) - 末页按钮显示的文本
Pager
align
(?boolean=true
) - 如果为true
则在页面的边上显示分页链接disabled
(?boolean=false
) - 如果为true
则分页组件将被禁用totalItems
(number
) - 总项目数itemsPerPage
(?number=10
) - 每页的项目数, 如果小于1将在一页显示所有的项目数previousText
(?string='上一页'
) - 上一页按钮显示的文本nextText
(?string='下一页'
) - 下一页按钮显示的文本
Outputs
Pagination
numPages
- 总页数改变时触发,$event:number
等于总页数pageChanged
- 当前页改变时触发,$event:{page, itemsPerPage}
等于对象包括当前页(page)和每页项目数(itemsPerPage)
Pager
numPages
- 总页数改变时触发,$event:number
等于总页数pageChanged
- 当前页改变时触发,$event:{page, itemsPerPage}
等于对象包括当前页(page)和每页项目数(itemsPerPage)
Develop
```shell
npm install // 安装依赖包
npm start // 启动项目
```