Angular2 PrimeNG分页模块学习
Angular2PrimeNG源码学习
Paginator分页组件
GITHUB地址
首先分析一下分页功能的需求：
- 由父组件传入数据总数量，每页显示数量，可自定义初始页
- 由父组件传入分页按钮个数
- 有第一页，上一页，下一页，最后一页按钮
- 可在页面选择性更改每页显示数量
HTML模板代码：
部分代码片段
第一页按钮：
<ahref="#"#firstlinkclass="ui-paginator-firstui-paginator-elementui-state-defaultui-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"> <spanclass="fafa-step-backward"></span> </a> 这段代码涉及几个事件。
1.鼠标移入移出更改hoveredItem变量，并以此更改样式
2.点击click事件，调用changePageToFirst(event)处理
上一页，下一页，最后一页和第一页类似
分页按钮：
<spanclass="ui-paginator-pages">
<ahref="#"#plink*ngFor="letpageLinkofpageLinks"class="ui-paginator-pageui-paginator-elementui-state-defaultui-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>=newEventEmitter();
//调整每页显示条目数量的下拉菜单
@Input()rowsPerPageOptions:number[];
//定义分页按钮
pageLinks:number[];
_totalRecords:number=0;
_first:number=0;
//数据总数
@Input()gettotalRecords():number{
returnthis._totalRecords;
}
settotalRecords(val:number){
this._totalRecords=val;
this.updatePageLinks();
}
//高亮按钮位置
@Input()getfirst():number{
returnthis._first;
}
setfirst(val:number){
this._first=val;
this.updatePageLinks();
}
//获取一共多少页
getPageCount(){
returnMath.ceil(this.totalRecords/this.rows)||1;
}
//获取当前页,0为第一页
getPage():number{
returnMath.floor(this.first/this.rows);
}
//是否为第一页
isFirstPage():boolean{
returnthis.getPage()===0;
}
//是否为最后一页
isLastPage():boolean{
returnthis.getPage()===this.getPageCount()-1;
}
//确定当先需要显示的起始分页和结束分页
calculatePageLinkBoundaries(){
letnumberOfPages=this.getPageCount();
letvisiblePages=Math.min(this.pageLinkSize,numberOfPages);
letstart=Math.max(0,Math.ceil(this.getPage()-(visiblePages/2)));
letend=Math.min(numberOfPages-1,start+visiblePages-1);
constdelta=this.pageLinkSize-(end-start+1);
start=Math.max(0,start-delta);
return[start,end];
}
//更新需要显示的分页条目
updatePageLinks():void{
this.pageLinks=[];
letboundaries=this.calculatePageLinkBoundaries;
conststart=boundaries[0];
constend=boundaries[1];
for(leti=start;i<=end;i++){
this.pageLinks.push(i+1);
}
}
//点击分页
changePage(p:number,event){
varpageCount=this.getPageCount();
if(p>0&&p<pageCount){
this.first=this.rows*p;
conststate={
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);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。