Angular2 PrimeNG分页模块学习


Posted in Javascript onJanuary 14, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript获取textarea中的光标位置
May 06 Javascript
css样式标签和js语法属性区别
Nov 06 Javascript
js/jQuery简单实现选项卡功能
Jan 02 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
javaScript封装的各种写法
Aug 14 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
vue+django实现下载文件的示例
Mar 24 Vue.js
bootstrap datetimepicker日期插件使用方法
Jan 13 #Javascript
详解jQuery事件
Jan 13 #Javascript
js实现固定宽高滑动轮播图效果
Jan 13 #Javascript
JavaScript利用闭包实现模块化
Jan 13 #Javascript
Vue.js基础知识小结
Jan 13 #Javascript
canvas实现流星雨的背景效果
Jan 13 #Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 #Javascript
You might like
PHP生成HTML静态页面实例代码
2008/08/31 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
php计算年龄精准到年月日
2015/11/17 PHP
鼠标图片振动代码
2006/07/06 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
Python 异常处理实例详解
2014/03/12 Python
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
基于Python闭包及其作用域详解
2017/08/28 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
django+mysql的使用示例
2018/11/23 Python
Python assert语句的简单使用示例
2019/07/28 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
德国家具在线:Fashion For Home
2017/03/11 全球购物
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
求职信的七个关键技巧
2014/02/05 职场文书
租房协议书怎么写
2014/04/10 职场文书
就业协议书的作用
2014/04/11 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
助理政工师申报材料
2014/06/03 职场文书
会计学自荐信
2014/06/03 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸