Angular2 PrimeNG分頁(yè)模塊學(xué)習(xí)
Angular2 PrimeNG源碼學(xué)習(xí)
Paginator分頁(yè)組件
首先分析一下分頁(yè)功能的需求:
- 由父組件傳入數(shù)據(jù)總數(shù)量,每頁(yè)顯示數(shù)量,可自定義初始頁(yè)
- 由父組件傳入分頁(yè)按鈕個(gè)數(shù)
- 有第一頁(yè),上一頁(yè),下一頁(yè),最后一頁(yè)按鈕
- 可在頁(yè)面選擇性更改每頁(yè)顯示數(shù)量
HTML模板代碼:
部分代碼片段
第一頁(yè)按鈕:
這段代碼涉及幾個(gè)事件。
1.鼠標(biāo)移入移出更改hoveredItem變量,并以此更改樣式
2.點(diǎn)擊click事件,調(diào)用changePageToFirst(event)處理
上一頁(yè),下一頁(yè),最后一頁(yè)和第一頁(yè)類(lèi)似
分頁(yè)按鈕:
<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>
分頁(yè)按鈕是通過(guò)*ngFor從分頁(yè)按鈕數(shù)組中循環(huán)出來(lái)的,所以我們需要去確定這個(gè)數(shù)組
下面處理數(shù)組,和各個(gè)按鈕的事件
//每頁(yè)顯示條目,默認(rèn)0
@Input() rows: number = 0;
//顯示分頁(yè)按鈕數(shù)量,默認(rèn)5
@Input() pageLinkSize: number = 5;
//點(diǎn)擊按鈕后向父組件發(fā)送事件
@Output() onPageChange: EventEmitter<any> = new EventEmitter();
//調(diào)整每頁(yè)顯示條目數(shù)量的下拉菜單
@Input() rowsPerPageOptions: number[];
//定義分頁(yè)按鈕
pageLinks: number[];
_totalRecords: number = 0;
_first: number = 0;
//數(shù)據(jù)總數(shù)
@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();
}
//獲取一共多少頁(yè)
getPageCount() {
return Math.ceil(this.totalRecords / this.rows) || 1;
}
//獲取當(dāng)前頁(yè),0為第一頁(yè)
getPage(): number {
return Math.floor(this.first / this.rows);
}
//是否為第一頁(yè)
isFirstPage(): boolean {
return this.getPage() === 0;
}
//是否為最后一頁(yè)
isLastPage(): boolean {
return this.getPage() === this.getPageCount() - 1;
}
//確定當(dāng)先需要顯示的起始分頁(yè)和結(jié)束分頁(yè)
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];
}
//更新需要顯示的分頁(yè)條目
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);
}
}
//點(diǎn)擊分頁(yè)
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();
}
}
//第一頁(yè)
changePageToFirst(event){
this.changePage(0,event);
}
//上一頁(yè)
changePageToPrev(event){
this.changePage(this.getPage() - 1,event);
}
//下一頁(yè)
changePageToNext(event){
this.changePage(this.getPage() + 1,event);
}
//最后一頁(yè)
changePageToLast(event){
this.changePage(this.getPageCount() - 1,event);
}
//通過(guò)下拉菜單更改每頁(yè)顯示數(shù)量
onRppChange(event){
this.rows = this.rowsPerPageOptions[event.target.selectedIndex];
this.changePageToFirst(event);
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Angular應(yīng)用prerender預(yù)渲染提高頁(yè)面加載速度
這篇文章主要介紹了Angular應(yīng)用prerender預(yù)渲染提高頁(yè)面加載速度,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
AngularJs用戶(hù)登錄問(wèn)題處理(交互及驗(yàn)證、阻止FQ處理)
這篇文章主要為大家詳細(xì)介紹了AngularJs用戶(hù)登錄問(wèn)題處理,包括交互及驗(yàn)證、阻止FQ處理,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10
自學(xué)實(shí)現(xiàn)angularjs依賴(lài)注入
這篇文章主要為大家詳細(xì)介紹了angularjs依賴(lài)注入的自己成果,如何實(shí)現(xiàn)angularjs依賴(lài)注入,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12
AngularJS轉(zhuǎn)換響應(yīng)內(nèi)容
這篇文章主要介紹了AngularJS轉(zhuǎn)換響應(yīng)內(nèi)容 的相關(guān)資料,需要的朋友可以參考下2016-01-01
AngularJS 單選框及多選框的雙向動(dòng)態(tài)綁定
本篇文章主要介紹了AngularJS 單選框及多選框的雙向動(dòng)態(tài)綁定的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
AngularJS入門(mén)之動(dòng)畫(huà)
AngularJS中ngAnimate模塊支持動(dòng)畫(huà)效果,但是ngAnimate模塊并未包含在AngularJS核心庫(kù)中,因此需要使用ngAnimate需要在定義Module時(shí)聲明對(duì)其的引用。下面通過(guò)本文我們來(lái)看看AngularJS動(dòng)畫(huà)的詳細(xì)介紹。2016-07-07

