| 1 |
43769
|
argiro.kok
|
import {Component, Input} from '@angular/core';
|
| 2 |
|
|
import {Router} from '@angular/router';
|
| 3 |
43955
|
argiro.kok
|
import {DomSanitizer} from '@angular/platform-browser';
|
| 4 |
43769
|
argiro.kok
|
//Usage Example <paging [currentPage]="page" [totalResults]="resultsNum" [navigateTo]="Search" [term]="keyword"> </paging>
|
| 5 |
46092
|
argiro.kok
|
import {RouterHelper} from './routerHelper.class';
|
| 6 |
43769
|
argiro.kok
|
|
| 7 |
|
|
@Component({
|
| 8 |
|
|
selector: 'paging',
|
| 9 |
|
|
template: `
|
| 10 |
44978
|
argiro.kok
|
|
| 11 |
43769
|
argiro.kok
|
|
| 12 |
45020
|
argiro.kok
|
<ul *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage && currentPage <= getTotalPages() ) " class="uk-pagination">
|
| 13 |
|
|
|
| 14 |
46092
|
argiro.kok
|
<li *ngIf=" currentPage > 1" ><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',1)" routerLinkActive="router-link-active" [routerLink]=baseUrl aria-label="Previous">
|
| 15 |
45429
|
konstantin
|
<span><i class="uk-icon-angle-double-left"></i></span></a></li>
|
| 16 |
46092
|
argiro.kok
|
<li *ngIf=" currentPage > 1" ><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage - 1))" routerLinkActive="router-link-active" [routerLink]=baseUrl aria-label="Previous">
|
| 17 |
45429
|
konstantin
|
<span><i class="uk-icon-angle-left"></i></span></a></li>
|
| 18 |
43955
|
argiro.kok
|
<!--<li *ngIf=" currentPage > 1"><a [href]="onPage((currentPage -1))">\<</a></li>-->
|
| 19 |
43769
|
argiro.kok
|
|
| 20 |
46092
|
argiro.kok
|
<li *ngIf=" currentPage -2 > 0"><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage - 2))" routerLinkActive="router-link-active" [routerLink]=baseUrl>{{currentPage -2}}</a></li>
|
| 21 |
|
|
<li *ngIf=" currentPage -1 > 0 "><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage - 1))" routerLinkActive="router-link-active" [routerLink]=baseUrl>{{currentPage -1}}</a></li>
|
| 22 |
45020
|
argiro.kok
|
<li class="uk-active"><span >{{currentPage}}</span></li>
|
| 23 |
46092
|
argiro.kok
|
<li *ngIf=" currentPage +1 <= getTotalPages() "><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +1))" routerLinkActive="router-link-active" [routerLink]=baseUrl>{{currentPage +1}}</a></li>
|
| 24 |
|
|
<li *ngIf=" currentPage +2 <= getTotalPages() "><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +2))" routerLinkActive="router-link-active" [routerLink]=baseUrl>{{currentPage +2}}</a></li>
|
| 25 |
|
|
<li *ngIf=" (currentPage -2 <= 0)&&(currentPage +3 <= getTotalPages()) "><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +3))" routerLinkActive="router-link-active" [routerLink]=baseUrl>{{currentPage +3}}</a></li>
|
| 26 |
|
|
<li *ngIf=" (currentPage -1 <= 0)&&(currentPage +4 <= getTotalPages()) "><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +4))" routerLinkActive="router-link-active" [routerLink]=baseUrl >{{currentPage +4}}</a></li>
|
| 27 |
43769
|
argiro.kok
|
|
| 28 |
46092
|
argiro.kok
|
<li *ngIf="getTotalPages() > currentPage"><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage + 1))" routerLinkActive="router-link-active" [routerLink]=baseUrl aria-label="Next">
|
| 29 |
45429
|
konstantin
|
<i class="uk-icon-angle-right"></i>
|
| 30 |
43769
|
argiro.kok
|
</a></li>
|
| 31 |
|
|
|
| 32 |
|
|
|
| 33 |
|
|
</ul>
|
| 34 |
|
|
`
|
| 35 |
|
|
})
|
| 36 |
|
|
|
| 37 |
|
|
export class PagingFormatter {
|
| 38 |
|
|
@Input() currentPage: number = 1;
|
| 39 |
|
|
@Input() size: number=10;
|
| 40 |
|
|
@Input() totalResults: number = 10;
|
| 41 |
43955
|
argiro.kok
|
@Input() baseUrl:string="";
|
| 42 |
46092
|
argiro.kok
|
@Input() parameterNames:string[];
|
| 43 |
|
|
@Input() parameterValues:string[];
|
| 44 |
43769
|
argiro.kok
|
|
| 45 |
46092
|
argiro.kok
|
public routerHelper:RouterHelper = new RouterHelper();
|
| 46 |
|
|
|
| 47 |
43955
|
argiro.kok
|
constructor ( private _router: Router, private sanitizer:DomSanitizer) {
|
| 48 |
43769
|
argiro.kok
|
}
|
| 49 |
|
|
|
| 50 |
|
|
ngOnInit() {
|
| 51 |
44048
|
argiro.kok
|
|
| 52 |
43769
|
argiro.kok
|
}
|
| 53 |
|
|
getTotalPages(){
|
| 54 |
|
|
var i:number =parseInt(''+(this.totalResults/this.size));
|
| 55 |
|
|
return (((this.totalResults/this.size) == i )? i :(i+1)) ;
|
| 56 |
|
|
}
|
| 57 |
|
|
|
| 58 |
46092
|
argiro.kok
|
// onPage(pageNum: number){
|
| 59 |
|
|
// return this.sanitizer.bypassSecurityTrustUrl( this.baseUrl+((this.baseUrl.indexOf("?") > -1 )?'&':'?')+ "page=" + (pageNum));
|
| 60 |
|
|
//
|
| 61 |
|
|
// }
|
| 62 |
43769
|
argiro.kok
|
}
|