1 |
43769
|
argiro.kok
|
import {Component, Input, Output, EventEmitter} from '@angular/core';
|
2 |
|
|
|
3 |
|
|
|
4 |
|
|
//Usage Example <paging [currentPage]="page" [totalResults]="resultsNum" [navigateTo]="Search" [term]="keyword"> </paging>
|
5 |
|
|
|
6 |
|
|
@Component({
|
7 |
|
|
selector: 'paging-no-load',
|
8 |
|
|
template: `
|
9 |
45020
|
argiro.kok
|
<ul *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage && currentPage <= getTotalPages() ) " class="uk-pagination">
|
10 |
43769
|
argiro.kok
|
|
11 |
|
|
<li *ngIf=" currentPage > 1" ><a (click)="onPage((1))" aria-label="Previous">
|
12 |
45020
|
argiro.kok
|
<span><i class="uk-icon-angle-double-left"></i></span></a></li>
|
13 |
43769
|
argiro.kok
|
<li *ngIf=" currentPage -2 > 0"><a (click)="onPage((currentPage -2))">{{currentPage -2}}</a></li>
|
14 |
|
|
<li *ngIf=" currentPage -1 > 0 "><a (click)="onPage((currentPage -1))">{{currentPage -1}}</a></li>
|
15 |
45020
|
argiro.kok
|
<li class="uk-active"><span >{{currentPage}}</span></li>
|
16 |
43769
|
argiro.kok
|
<li *ngIf=" currentPage +1 <= getTotalPages() "><a (click)="onPage((currentPage +1))">{{currentPage +1}}</a></li>
|
17 |
|
|
<li *ngIf=" currentPage +2 <= getTotalPages() "><a (click)="onPage((currentPage +2))">{{currentPage +2}}</a></li>
|
18 |
|
|
<li *ngIf=" (currentPage -2 <= 0)&&(currentPage +3 <= getTotalPages()) "><a (click)="onPage((currentPage +3))">{{currentPage +3}}</a></li>
|
19 |
|
|
<li *ngIf=" (currentPage -1 <= 0)&&(currentPage +4 <= getTotalPages()) "><a (click)="onPage((currentPage +4))">{{currentPage +4}}</a></li>
|
20 |
|
|
<li *ngIf="getTotalPages() > currentPage"><a (click)="onPage((getTotalPages()))" aria-label="Next">
|
21 |
45020
|
argiro.kok
|
<i class="uk-icon-angle-double-right"></i>
|
22 |
43769
|
argiro.kok
|
</a>
|
23 |
|
|
</li>
|
24 |
|
|
|
25 |
|
|
|
26 |
|
|
</ul>
|
27 |
45020
|
argiro.kok
|
|
28 |
43769
|
argiro.kok
|
`
|
29 |
|
|
})
|
30 |
|
|
|
31 |
|
|
export class pagingFormatterNoLoad {
|
32 |
|
|
@Input() public currentPage: number = 1;
|
33 |
|
|
@Input() public navigateTo: string;
|
34 |
|
|
@Input() public term: string='';
|
35 |
|
|
@Input() public size: number=10;
|
36 |
|
|
@Input() public totalResults: number = 10;
|
37 |
|
|
@Input() public params;
|
38 |
|
|
|
39 |
|
|
@Output() pageChange = new EventEmitter();
|
40 |
|
|
|
41 |
|
|
constructor () {
|
42 |
|
|
}
|
43 |
|
|
|
44 |
|
|
ngOnInit() {
|
45 |
|
|
console.info("In paging -- CurrentPage:"+this.currentPage+" "+"total Pages = "+this.getTotalPages() +" Results num:"+this.totalResults);
|
46 |
|
|
}
|
47 |
|
|
getTotalPages(){
|
48 |
|
|
var i= this.totalResults/this.size;
|
49 |
|
|
var integerI=parseInt(''+i);
|
50 |
|
|
return parseInt(''+((i==integerI)?i:i+1));
|
51 |
|
|
}
|
52 |
|
|
onPrev(){
|
53 |
|
|
this.currentPage=this.currentPage-1;
|
54 |
|
|
this.pageChange.emit({
|
55 |
|
|
value: this.currentPage
|
56 |
|
|
});
|
57 |
|
|
|
58 |
|
|
}
|
59 |
|
|
|
60 |
|
|
onNext(){
|
61 |
|
|
|
62 |
|
|
this.currentPage=this.currentPage+1;
|
63 |
|
|
this.pageChange.emit({
|
64 |
|
|
value: this.currentPage
|
65 |
|
|
});
|
66 |
|
|
}
|
67 |
|
|
onPage(pageNum: number){
|
68 |
|
|
|
69 |
|
|
this.currentPage=pageNum;
|
70 |
|
|
this.pageChange.emit({
|
71 |
|
|
value: this.currentPage
|
72 |
|
|
});
|
73 |
|
|
}
|
74 |
|
|
}
|