86 lines
3.2 KiB
TypeScript
86 lines
3.2 KiB
TypeScript
import {Component, Input} from '@angular/core';
|
|
import {Router, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
|
|
|
|
//Usage Example <paging [currentPage]="page" [totalResults]="resultsNum" [navigateTo]="Search" [term]="keyword"> </paging>
|
|
|
|
@Component({
|
|
selector: 'paging',
|
|
template: `
|
|
<div *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage && currentPage <= getTotalPages() ) " >
|
|
<ul class="pagination">
|
|
|
|
<li *ngIf=" currentPage > 1" ><a (click)="onPage((1))" aria-label="Previous">
|
|
<span aria-hidden="true">«</span></a></li>
|
|
<!--<li *ngIf=" currentPage > 1"><a (click)="onPage((currentPage -1))">\<</a></li>-->
|
|
|
|
<li *ngIf=" currentPage -2 > 0"><a (click)="onPage((currentPage -2))">{{currentPage -2}}</a></li>
|
|
<li *ngIf=" currentPage -1 > 0 "><a (click)="onPage((currentPage -1))">{{currentPage -1}}</a></li>
|
|
<li class="active"><a >{{currentPage}}</a></li>
|
|
<li *ngIf=" currentPage +1 <= getTotalPages() "><a (click)="onPage((currentPage +1))">{{currentPage +1}}</a></li>
|
|
<li *ngIf=" currentPage +2 <= getTotalPages() "><a (click)="onPage((currentPage +2))">{{currentPage +2}}</a></li>
|
|
<li *ngIf=" (currentPage -2 <= 0)&&(currentPage +3 <= getTotalPages()) "><a (click)="onPage((currentPage +3))">{{currentPage +3}}</a></li>
|
|
<li *ngIf=" (currentPage -1 <= 0)&&(currentPage +4 <= getTotalPages()) "><a (click)="onPage((currentPage +4))">{{currentPage +4}}</a></li>
|
|
|
|
<li *ngIf="getTotalPages() > currentPage"><a (click)="onPage((getTotalPages()))" aria-label="Next">
|
|
<span aria-hidden="true">»</span>
|
|
</a></li>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
`,
|
|
directives: [
|
|
...ROUTER_DIRECTIVES
|
|
]
|
|
})
|
|
|
|
export class PagingFormatter {
|
|
@Input() currentPage: number = 1;
|
|
@Input() navigateTo: string;
|
|
@Input() term: string='';
|
|
@Input() size: number=10;
|
|
@Input() totalResults: number = 10;
|
|
@Input() params;
|
|
|
|
constructor ( private _router: Router) {
|
|
}
|
|
|
|
ngOnInit() {
|
|
console.info("In paging -- CurrentPage:"+this.currentPage+" "+"total Pages = "+this.getTotalPages() +" Results num:"+this.totalResults);
|
|
}
|
|
getTotalPages(){
|
|
var i:number =parseInt(''+(this.totalResults/this.size));
|
|
return (((this.totalResults/this.size) == i )? i :(i+1)) ;
|
|
}
|
|
onPrev(){
|
|
if(this.params){
|
|
let pageparams= this.params;
|
|
pageparams.page=this.currentPage -1
|
|
this._router.navigate( [this.navigateTo, pageparams] );
|
|
}else{
|
|
this._router.navigate( [this.navigateTo, { keyword: this.term, page: (this.currentPage -1) }] );
|
|
}
|
|
}
|
|
|
|
onNext(){
|
|
if(this.params){
|
|
let pageparams= this.params;
|
|
pageparams.page=this.currentPage +1;
|
|
this._router.navigate( [this.navigateTo, pageparams] );
|
|
}else{
|
|
this._router.navigate( [this.navigateTo, { keyword: this.term, page: (this.currentPage +1) }] );
|
|
}
|
|
}
|
|
onPage(pageNum: number){
|
|
if(this.params){
|
|
let pageparams= this.params;
|
|
pageparams.page=pageNum;
|
|
this._router.navigate( [this.navigateTo, pageparams] );
|
|
}else if(this.term!=''){
|
|
this._router.navigate( [this.navigateTo, { keyword: this.term, page: pageNum, size: this.size }] );
|
|
}else{
|
|
this._router.navigate( [this.navigateTo, { page: pageNum, size: this.size }] );
|
|
}
|
|
}
|
|
}
|