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è)類似
分頁(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)文章
angular2組件中定時(shí)刷新并清除定時(shí)器的實(shí)例講解
今天小編就為大家分享一篇angular2組件中定時(shí)刷新并清除定時(shí)器的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Angular實(shí)現(xiàn)form自動(dòng)布局
這篇文章主要介紹了Angular實(shí)現(xiàn)form自動(dòng)布局的相關(guān)資料,以代碼片段的形式分析了Angular實(shí)現(xiàn)form自動(dòng)布局的實(shí)現(xiàn)方法,感興趣的小伙伴們可以參考一下2016-01-01
angular6的table組件開(kāi)發(fā)的實(shí)現(xiàn)示例
這篇文章主要介紹了angular6的table組件開(kāi)發(fā)的實(shí)現(xiàn)示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
AngularJS ng-change 指令的詳解及簡(jiǎn)單實(shí)例
本文主要介紹AngularJS ng-change 指令,這里對(duì)ng-change指令資料做了詳細(xì)介紹,并提供源碼和運(yùn)行結(jié)果,有需要的小伙伴參考下2016-07-07
Angular應(yīng)用prerender預(yù)渲染提高頁(yè)面加載速度
這篇文章主要介紹了Angular應(yīng)用prerender預(yù)渲染提高頁(yè)面加載速度,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10

