Angular2 PrimeNG分页模块学习

Angular2 PrimeNG分页模块学习

Angular2 PrimeNG源码学习

Paginator分页组件

github地址

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

由父组件传入数据总数量，每页显示数量，可自定义初始页

由父组件传入分页按钮个数

有第一页，上一页，下一页，最后一页按钮

可在页面选择性更改每页显示数量

HTML模板代码：

部分代码片段

第一页按钮：

复制代码 代码如下:

这段代码涉及几个事件。

1.鼠标移入移出更改hoveredItem变量，并以此更改样式

2.点击click事件，调用changePageToFirst(event)处理

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

分页按钮：

复制代码 代码如下:

     [ngClass]="{'ui-state-hover':(plink === hoveredItem), 'ui-state-active': (pageLink-1 == getPage())}">{{pageLink}}

     [ngClass]="{'ui-state-hover':(plink === hoveredItem), 'ui-state-active': (pageLink-1 == getPage())}">{{pageLink}}

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

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

//每页显示条目，默认0

@Input() rows: number = 0;

//显示分页按钮数量，默认5

@Input() pageLinkSize: number = 5;

//点击按钮后向父组件发送事件

@Output() onPageChange: EventEmitter = 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.changePagehttp://(this.getPage() - 1,event);

}

//下一页

changePageToNext(event){

this.changePage(this.getPage() + 1,event);

}

/nkUnRJ/最后一页

changePageToLast(event){

this.changePage(this.getPageCount() - 1,event);

}

//通过下拉菜单更改每页显示数量

onRppChange(event){

this.rows = this.rowsPerPageOptions[event.target.selectedIndex];

this.changePageToFirst(event);

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。