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对象弹出一个层
Mar 26 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 Javascript
JS运算符优先级与表达式示例详解
Sep 04 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中使用curl入门教程
2015/07/02 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
PHP实现八皇后算法
2019/05/06 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
JS 自动安装exe程序
2008/11/30 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
Django中FilePathField字段的用法
2020/05/21 Python
如何表示python中的相对路径
2020/07/08 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
经贸日语专业个人求职信
2013/12/13 职场文书
2014年群众路线党员自我评议
2014/09/24 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
年终工作总结范文
2019/06/20 职场文书
React 高阶组件HOC用法归纳
2021/06/13 Javascript
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技