Angular2-PrimeNG 分页模块源码学习

Angular2 PrimeNG源码学习

Paginator分页组件

GITHUB地址

首先分析一下分页功能的需求：

1. 由父组件传入数据总数量，每页显示数量，可自定义初始页
2. 由父组件传入分页按钮个数
3. 有第一页，上一页，下一页，最后一页按钮
4. 可在页面选择性更改每页显示数量

HTML模板代码：
部分代码片段

第一页按钮：

 <a href="#" #firstlink class="ui-paginator-first ui-paginator-element ui-state-default ui-corner-all"  (mouseenter)="hoveredItem = $event.target" (mouseleave)="hoveredItem = null" (click)="changePageToFirst($event)" [ngClass]="{'ui-state-disabled':isFirstPage(), 'ui-state-hover':(firstlink === hoveredItem && !isFirstPage())}" [tabindex]="isFirstPage() ? -1 : null"> <span class="fa fa-step-backward"></span>  </a>

这段代码涉及几个事件。
1.鼠标移入移出更改hoveredItem变量，并以此更改样式
2.点击click事件，调用changePageToFirst(event)处理

上一页，下一页，最后一页和第一页类似

分页按钮：

 <span class="ui-paginator-pages">     <a href="#" #plink *ngFor="let pageLink of pageLinks" class="ui-paginator-page ui-paginator-element ui-state-default ui-corner-all"(mouseenter)="hoveredItem = $event.target" (mouseleave)="hoveredItem = null" (click)="changePage(pageLink - 1, $event)"     [ngClass]="{'ui-state-hover':(plink === hoveredItem), 'ui-state-active': (pageLink-1 == getPage())}">{{pageLink}}     </a> </span>

分页按钮是通过*ngFor从分页按钮数组中循环出来的，所以我们需要去确定这个数组

下面处理数组，和各个按钮的事件

//每页显示条目，默认0@Input() rows: number = 0;//显示分页按钮数量，默认5@Input() pageLinkSize: number = 5;//点击按钮后向父组件发送事件@Output() onPageChange: EventEmitter<any> = new EventEmitter();//调整每页显示条目数量的下拉菜单@Input() rowsPerPageOptions: number[];//定义分页按钮pageLinks: number[];_totalRecords: number = 0;_first: number = 0;//数据总数@Input() get totalRecords(): number {    return this._totalRecords;}set totalRecords(val: number) {    this._totalRecords = val;    this.updatePageLinks();}//高亮按钮位置@Input() get first(): number {    return this._first;}set first(val: number) {    this._first = val;    this.updatePageLinks();}

//获取一共多少页getPageCount() {    return Math.ceil(this.totalRecords / this.rows) || 1;}//获取当前页,0为第一页getPage(): number {    return Math.floor(this.first / this.rows);}//是否为第一页isFirstPage(): boolean {    return this.getPage() === 0;}//是否为最后一页isLastPage(): boolean {    return this.getPage() === this.getPageCount() - 1;}

//确定当先需要显示的起始分页和结束分页calculatePageLinkBoundaries() {    let numberOfPages = this.getPageCount();    let visiblePages = Math.min(this.pageLinkSize, numberOfPages);    let start = Math.max(0, Math.ceil(this.getPage() - (visiblePages / 2)));    let end = Math.min(numberOfPages - 1, start + visiblePages - 1);    const delta = this.pageLinkSize - (end - start + 1);    start = Math.max(0, start - delta);    return [start, end];}//更新需要显示的分页条目updatePageLinks(): void {    this.pageLinks = [];    let boundaries = this.calculatePageLinkBoundaries;    const start = boundaries[0];    const end = boundaries[1];    for (let i = start; i <= end; i++) {        this.pageLinks.push(i + 1);    }}//点击分页changePage(p: number, event) {    var pageCount = this.getPageCount();    if (p > 0 && p < pageCount) {        this.first = this.rows * p;        const state = {            page: p,            first: this.first,            rows: this.rows,            pageCount: pageCount        };        this.updatePageLinks();        this.onPageChange.emit(state);    }    if (event) {        event.preventDefault();    }}

//第一页changePageToFirst(event){    this.changePage(0,event);}//上一页changePageToPrev(event){    this.changePage(this.getPage() - 1,event);}//下一页changePageToNext(event){    this.changePage(this.getPage() + 1,event);}//最后一页changePageToLast(event){    this.changePage(this.getPageCount() - 1,event);}//通过下拉菜单更改每页显示数量onRppChange(event){    this.rows = this.rowsPerPageOptions[event.target.selectedIndex];    this.changePageToFirst(event);}