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 相关文章推荐
点图片上一页下一页翻页效果
Jul 09 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
深入理解vue中的$set
Jun 01 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
javascript的this关键字详解
May 20 Javascript
JS实现鼠标按下拖拽效果
Jul 23 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 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
解析dedecms空间迁移步骤详解
2013/05/15 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
Nginx实现反向代理
2017/09/20 Servers
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
单链表反转python实现代码示例
2018/02/08 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
python超时重新请求解决方案
2019/10/21 Python
python中的itertools的使用详解
2020/01/13 Python
python实现在一个画布上画多个子图
2020/01/19 Python
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
Linux文件操作命令都有哪些
2016/07/23 面试题
夜不归宿检讨书
2014/02/25 职场文书
车间机修工岗位职责
2014/02/28 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
暂住证证明
2015/06/19 职场文书
谢师宴家长致辞
2015/07/27 职场文书
公司员工管理制度
2015/08/04 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技