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 相关文章推荐
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
详解React之key的使用和实践
Sep 29 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
JS前端基于canvas给图片添加水印
Nov 11 Javascript
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 反射机制实现动态代理的代码
2008/10/22 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
在html页面上拖放移动标签
2010/01/08 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
python基础教程之基本内置数据类型介绍
2014/02/20 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
实现Python与STM32通信方式
2019/12/18 Python
python logging添加filter教程
2019/12/24 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
机械专业个人求职自荐信格式
2013/09/21 职场文书
工商管理系学生的自我评价分享
2013/11/29 职场文书
《理想》教学反思
2014/02/17 职场文书
终止劳动合同协议书
2014/10/05 职场文书
2015年中个人总结范文
2015/03/10 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python