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查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
JQuery中使用ajax传输超大数据的解决方法
Jul 14 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
React 高阶组件入门介绍
Jan 11 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
微信小程序实现笑脸评分功能
Nov 03 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更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
php文件缓存方法总结
2016/03/16 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
python中实现字符串翻转的方法
2018/07/11 Python
python实现桌面壁纸切换功能
2019/01/21 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
Python for i in range ()用法详解
2020/09/18 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
教师开学感言
2014/02/14 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
开学典礼策划方案
2014/05/28 职场文书
违纪学生保证书
2015/02/27 职场文书
Django框架中视图的用法
2022/06/10 Python