ngx-advance-pagination
Version:
An advance pagination for Angular2+ with dots facility.
148 lines (142 loc) • 9.43 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Output, Input, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class NgxAdvancePaginationComponent {
constructor() {
this._totalNumberOfData = 0;
this._dataPerPage = 1;
this._currentPageNumber = 1;
this._totalNumberOfPaginationsToShow = 9;
this.pageNumberChanged = new EventEmitter();
this.paginationArr = [];
this.numOfPaginations = 0;
}
set totalNumberOfData(val) {
this._totalNumberOfData = val;
this._paginationCalculations();
}
set dataPerPage(val) {
this._dataPerPage = val;
this._paginationCalculations();
}
set currentPageNumber(val) {
this._currentPageNumber = val;
this._paginationCalculations();
}
set numberOfPagesToShow(val) {
this._totalNumberOfPaginationsToShow = val;
this._paginationCalculations();
}
ngOnInit() {
}
_paginationCalculations() {
this.numOfPaginations = this._totalNumberOfData % this._dataPerPage == 0 ? this._totalNumberOfData / this._dataPerPage : parseInt((this._totalNumberOfData / this._dataPerPage).toString()) + 1;
this.paginationArr = [];
if (this.numOfPaginations <= this._totalNumberOfPaginationsToShow) {
for (let i = 1; i <= this.numOfPaginations; i++) {
this.paginationArr.push(i);
}
}
else if (this._currentPageNumber <= (parseInt((this._totalNumberOfPaginationsToShow / 2).toString()))) {
for (let i = 1; i <= this._totalNumberOfPaginationsToShow - 2; i++) {
this.paginationArr.push(i);
}
this.paginationArr.push('...');
this.paginationArr.push(this.numOfPaginations);
}
else if (this._currentPageNumber >= (this.numOfPaginations - parseInt((this._totalNumberOfPaginationsToShow / 2).toString()))) {
this.paginationArr.push(1);
this.paginationArr.push('...');
for (let i = (this.numOfPaginations - this._totalNumberOfPaginationsToShow + 3); i <= this.numOfPaginations; i++) {
this.paginationArr.push(i);
}
}
else {
let numberOfLoops = this._totalNumberOfPaginationsToShow - 4;
let initCounter = numberOfLoops % 2 == 0 ? this._currentPageNumber - parseInt((numberOfLoops / 2).toString()) + 1 : this._currentPageNumber - parseInt((numberOfLoops / 2).toString());
let endCounter = numberOfLoops % 2 != 0 ? this._currentPageNumber + parseInt((numberOfLoops / 2).toString()) : this._currentPageNumber + (numberOfLoops / 2);
this.paginationArr.push(1);
this.paginationArr.push('...');
for (let i = initCounter; i <= endCounter; i++) {
this.paginationArr.push(i);
}
this.paginationArr.push('...');
this.paginationArr.push(this.numOfPaginations);
}
}
paginationClicked(evnt, pageNum) {
evnt.preventDefault();
if (isNaN(pageNum)) {
return;
}
this._currentPageNumber = pageNum;
this._paginationCalculations();
this.pageNumberChanged.emit(pageNum);
}
prevClicked() {
if (this._currentPageNumber == 1) {
return;
}
this._currentPageNumber = this._currentPageNumber - 1;
this._paginationCalculations();
this.pageNumberChanged.emit(this._currentPageNumber);
}
nextClicked() {
if (this._currentPageNumber == this.numOfPaginations) {
return;
}
this._currentPageNumber = this._currentPageNumber + 1;
this._paginationCalculations();
this.pageNumberChanged.emit(this._currentPageNumber);
}
}
NgxAdvancePaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxAdvancePaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxAdvancePaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: NgxAdvancePaginationComponent, selector: "NgxAdvancePagination", inputs: { totalNumberOfData: "totalNumberOfData", dataPerPage: "dataPerPage", currentPageNumber: "currentPageNumber", numberOfPagesToShow: "numberOfPagesToShow" }, outputs: { pageNumberChanged: "pageNumberChanged" }, ngImport: i0, template: "<div class=\"ngx-advance-pagination-container\" *ngIf=\"numOfPaginations > 0\">\r\n <ul class=\"ngx-advance-pagination\">\r\n <li class=\"ngx-advance-pagination-page-item ngx-advance-pagination-left-control\">\r\n <a href=\"javascript:void(0);\" (click)=\"prevClicked()\" class=\"ngx-advance-pagination-page-link\">‹</a>\r\n </li>\r\n <li *ngFor=\"let data of paginationArr\" [class]=\"data == _currentPageNumber ? 'active ngx-advance-pagination-page-item' : 'ngx-advance-pagination-page-item'\">\r\n <a href=\"javascript:void(0);\" (click)=\"paginationClicked($event, data)\" class=\"ngx-advance-pagination-page-link\" >{{data}}</a>\r\n </li>\r\n <li class=\"ngx-advance-pagination-page-item ngx-advance-pagination-right-control\">\r\n <a href=\"javascript:void(0);\" (click)=\"nextClicked()\" class=\"ngx-advance-pagination-page-link\" >›</a>\r\n </li>\r\n </ul>\r\n</div>", styles: [".ngx-advance-pagination-container .ngx-advance-pagination{margin:0;padding:0}.ngx-advance-pagination-container .ngx-advance-pagination .ngx-advance-pagination-page-item{list-style:none;float:left;border:1px solid rgba(0,0,0,.7);border-right:none;line-height:28px}.ngx-advance-pagination-container .ngx-advance-pagination .ngx-advance-pagination-page-item:first-child{border-radius:2px 0 0 2px}.ngx-advance-pagination-container .ngx-advance-pagination .ngx-advance-pagination-page-item:last-child{border-right:1px solid rgba(0,0,0,.7);border-radius:0 2px 2px 0}.ngx-advance-pagination-container .ngx-advance-pagination .ngx-advance-pagination-page-item.ngx-advance-pagination-left-control,.ngx-advance-pagination-container .ngx-advance-pagination .ngx-advance-pagination-page-item.ngx-advance-pagination-right-control{font-size:20px;line-height:25px}.ngx-advance-pagination-container .ngx-advance-pagination .ngx-advance-pagination-page-item .ngx-advance-pagination-page-link{text-decoration:none;display:block;background:#ffffff;color:#333;padding-left:10px;padding-right:10px;height:28px}.ngx-advance-pagination-container .ngx-advance-pagination .ngx-advance-pagination-page-item.active .ngx-advance-pagination-page-link,.ngx-advance-pagination-container .ngx-advance-pagination .ngx-advance-pagination-page-item:hover:not(.ngx-advance-pagination-left-control):not(.ngx-advance-pagination-right-control) .ngx-advance-pagination-page-link{background:#0b69c0;color:#fff}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxAdvancePaginationComponent, decorators: [{
type: Component,
args: [{
selector: 'NgxAdvancePagination',
templateUrl: './ngx-advance-pagination.component.html',
styleUrls: ['./ngx-advance-pagination.component.scss']
}]
}], ctorParameters: function () { return []; }, propDecorators: { pageNumberChanged: [{
type: Output
}], totalNumberOfData: [{
type: Input
}], dataPerPage: [{
type: Input
}], currentPageNumber: [{
type: Input
}], numberOfPagesToShow: [{
type: Input
}] } });
class NgxAdvancePaginationModule {
}
NgxAdvancePaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxAdvancePaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxAdvancePaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxAdvancePaginationModule, declarations: [NgxAdvancePaginationComponent], imports: [CommonModule], exports: [NgxAdvancePaginationComponent] });
NgxAdvancePaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxAdvancePaginationModule, imports: [[
CommonModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NgxAdvancePaginationModule, decorators: [{
type: NgModule,
args: [{
declarations: [
NgxAdvancePaginationComponent
],
imports: [
CommonModule
],
exports: [
NgxAdvancePaginationComponent
]
}]
}] });
/*
* Public API Surface of ngx-advance-pagination
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxAdvancePaginationComponent, NgxAdvancePaginationModule };
//# sourceMappingURL=ngx-advance-pagination.js.map