微信小程序的作用_Angular2 PrimeNG分页模块学习

Angular2 PrimeNG分页模块学习       这篇文章主要为大家详细介绍了Angular2 PrimeNG分页模块学习教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

Paginator分页组件

首先分析一下分页功能的需求：

由父组件传入数据总数量，每页显示数量，可自定义初始页 由父组件传入分页按钮个数 有第一页，上一页，下一页，最后一页按钮 可在页面选择性更改每页显示数量

第一页按钮：

代码如下:  a href="#" #firstlink  (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 /span   /a  

这段代码涉及几个事件。
1.鼠标移入移出更改hoveredItem变量，并以此更改样式
2.点击click事件，调用changePageToFirst(event)处理

上一页，下一页，最后一页和第一页类似

分页按钮：

代码如下: span
  a href="#" #plink *ngFor="let pageLink of pageLinks" (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();

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();
this.rows = this.rowsPerPageOptions[event.target.selectedIndex]; this.changePageToFirst(event);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。