当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > Angular2 PrimeNG分页模块学习

Angular2 PrimeNG分页模块学习

2018年05月03日  | 移动技术网IT编程  | 我要评论

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);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网