Skip to content

Instantly share code, notes, and snippets.

@ihadeed
Last active February 11, 2020 04:25
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ihadeed/f66a5e3cf58ab337e8e3e3957fd3fd17 to your computer and use it in GitHub Desktop.
Save ihadeed/f66a5e3cf58ab337e8e3e3957fd3fd17 to your computer and use it in GitHub Desktop.
Angular2 Component: Pagination (optionally uses semantic-ui)
import {Component, Input, Output, AfterViewInit, EventEmitter, NgZone, Self} from '@angular/core';
import {NgClass} from '@angular/common';
import {ControlValueAccessor, NgModel} from '@angular/common';
@Component({
selector: 'pagination',
template: `<div class="ui borderless menu" *ngIf="numberOfPages > 1">
<a class="item" (click)="selectPage(1)" [ngClass]="{active: selectedPage==1}">{{1}}</a>
<a class="item disabled" *ngIf="numberOfPages > 10 && selectedPage > 5">...</a>
<a class="item" *ngFor="let page of pages" (click)="selectPage(page)" [ngClass]="{active: selectedPage==page}">{{page}}</a>
<a class="item disabled" *ngIf="numberOfPages > 10 && selectedPage < numberOfPages-5">...</a>
<a class="item" (click)="selectPage(numberOfPages)" [ngClass]="{active: selectedPage==numberOfPages}">{{numberOfPages}}</a>
</div>`,
directives: [NgClass],
providers: [NgModel]
})
export class PaginationComponent implements AfterViewInit, ControlValueAccessor {
private _total: number;
private _limit: number;
@Input()
public get total(): number {
return this._total;
}
public set total(value: number){
this._total = value;
this.updatePages();
}
@Input()
public get limit(): number{
return this._limit;
}
public set limit(value: number){
this._limit = value;
}
@Output() pageSelect: EventEmitter<number> = new EventEmitter<number>();
@Output() totalPages: EventEmitter<number> = new EventEmitter<number>();
private numberOfPages: number;
private pages: any[] = [];
private selectedPage: number = 1;
public onChange: any = Function.prototype;
public onTouched: any = Function.prototype;
constructor(@Self() private self: NgModel, private ngZone: NgZone){
this.self.valueAccessor = this;
}
ngAfterViewInit(): void {
this.updatePages();
}
updatePages(): void {
this.numberOfPages = Math.ceil(this._total / this.limit);
this.pages = [];
if(this.numberOfPages > 9){
let start = this.selectedPage > 5? this.selectedPage - 2 : this.selectedPage - 3;
while(start <= 1) start++;
while(start+5 >= this.numberOfPages) start--;
for(let x=0; x < 6; x++){
this.pages.push(start+x);
}
let x: number = start + 7;
let y: number = this.selectedPage + 5;
if((x == this.numberOfPages) && (y == this.numberOfPages)) this.pages.push(start+6);
} else for(let x = 1; x <= this.numberOfPages; x++) if(x !== 1 && x !== this.numberOfPages) this.pages.push(x);
}
selectPage(page: number): void {
if(page===this.selectedPage) return;
this.selectedPage = page;
this.updatePages();
this.pageSelect.emit(page);
this.self.viewToModelUpdate(page);
}
writeValue (value: number): void {
if (value === this.selectedPage) {
return;
}
this.selectedPage = +value;
}
registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
registerOnTouched(fn: () => void): void { this.onTouched = fn; }
}
@ihadeed
Copy link
Author

ihadeed commented Jul 8, 2016

Designed for SemanticUI, but can work with anything else. Just modify the HTML.

Usage:

<pagination [total]="total" [limit]="limit" (pageSelect)="onPageSelect($event)" [(ngModel)]="selectedPage"></pagination>
  total: number = 100; // total number of items
  limit: number = 10; // how many items are you showing in each page (should match what your API returns)
  selectedPage: number = 1; // the current selected page

  onPageSelect(pageNumber: number): void {
    this.selectedPage = pageNumber;
    // do update content to view new page content
  }

@polyester941
Copy link

polyester941 commented Feb 11, 2020

Hi Ibby,

Which license applies to this gist?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment