ngx-advance-pagination
Version:
An advance pagination for Angular2+ with dots facility.
195 lines (185 loc) • 12.6 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ngx-advance-pagination', ['exports', '@angular/core', '@angular/common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["ngx-advance-pagination"] = {}, global.ng.core, global.ng.common));
})(this, (function (exports, i0, i1) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
var NgxAdvancePaginationComponent = /** @class */ (function () {
function NgxAdvancePaginationComponent() {
this._totalNumberOfData = 0;
this._dataPerPage = 1;
this._currentPageNumber = 1;
this._totalNumberOfPaginationsToShow = 9;
this.pageNumberChanged = new i0.EventEmitter();
this.paginationArr = [];
this.numOfPaginations = 0;
}
Object.defineProperty(NgxAdvancePaginationComponent.prototype, "totalNumberOfData", {
set: function (val) {
this._totalNumberOfData = val;
this._paginationCalculations();
},
enumerable: false,
configurable: true
});
Object.defineProperty(NgxAdvancePaginationComponent.prototype, "dataPerPage", {
set: function (val) {
this._dataPerPage = val;
this._paginationCalculations();
},
enumerable: false,
configurable: true
});
Object.defineProperty(NgxAdvancePaginationComponent.prototype, "currentPageNumber", {
set: function (val) {
this._currentPageNumber = val;
this._paginationCalculations();
},
enumerable: false,
configurable: true
});
Object.defineProperty(NgxAdvancePaginationComponent.prototype, "numberOfPagesToShow", {
set: function (val) {
this._totalNumberOfPaginationsToShow = val;
this._paginationCalculations();
},
enumerable: false,
configurable: true
});
NgxAdvancePaginationComponent.prototype.ngOnInit = function () {
};
NgxAdvancePaginationComponent.prototype._paginationCalculations = function () {
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 (var i = 1; i <= this.numOfPaginations; i++) {
this.paginationArr.push(i);
}
}
else if (this._currentPageNumber <= (parseInt((this._totalNumberOfPaginationsToShow / 2).toString()))) {
for (var 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 (var i = (this.numOfPaginations - this._totalNumberOfPaginationsToShow + 3); i <= this.numOfPaginations; i++) {
this.paginationArr.push(i);
}
}
else {
var numberOfLoops = this._totalNumberOfPaginationsToShow - 4;
var initCounter = numberOfLoops % 2 == 0 ? this._currentPageNumber - parseInt((numberOfLoops / 2).toString()) + 1 : this._currentPageNumber - parseInt((numberOfLoops / 2).toString());
var endCounter = numberOfLoops % 2 != 0 ? this._currentPageNumber + parseInt((numberOfLoops / 2).toString()) : this._currentPageNumber + (numberOfLoops / 2);
this.paginationArr.push(1);
this.paginationArr.push('...');
for (var i = initCounter; i <= endCounter; i++) {
this.paginationArr.push(i);
}
this.paginationArr.push('...');
this.paginationArr.push(this.numOfPaginations);
}
};
NgxAdvancePaginationComponent.prototype.paginationClicked = function (evnt, pageNum) {
evnt.preventDefault();
if (isNaN(pageNum)) {
return;
}
this._currentPageNumber = pageNum;
this._paginationCalculations();
this.pageNumberChanged.emit(pageNum);
};
NgxAdvancePaginationComponent.prototype.prevClicked = function () {
if (this._currentPageNumber == 1) {
return;
}
this._currentPageNumber = this._currentPageNumber - 1;
this._paginationCalculations();
this.pageNumberChanged.emit(this._currentPageNumber);
};
NgxAdvancePaginationComponent.prototype.nextClicked = function () {
if (this._currentPageNumber == this.numOfPaginations) {
return;
}
this._currentPageNumber = this._currentPageNumber + 1;
this._paginationCalculations();
this.pageNumberChanged.emit(this._currentPageNumber);
};
return NgxAdvancePaginationComponent;
}());
NgxAdvancePaginationComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NgxAdvancePaginationComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
NgxAdvancePaginationComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NgxAdvancePaginationComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'NgxAdvancePagination',
templateUrl: './ngx-advance-pagination.component.html',
styleUrls: ['./ngx-advance-pagination.component.scss']
}]
}], ctorParameters: function () { return []; }, propDecorators: { pageNumberChanged: [{
type: i0.Output
}], totalNumberOfData: [{
type: i0.Input
}], dataPerPage: [{
type: i0.Input
}], currentPageNumber: [{
type: i0.Input
}], numberOfPagesToShow: [{
type: i0.Input
}] } });
var NgxAdvancePaginationModule = /** @class */ (function () {
function NgxAdvancePaginationModule() {
}
return NgxAdvancePaginationModule;
}());
NgxAdvancePaginationModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NgxAdvancePaginationModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NgxAdvancePaginationModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NgxAdvancePaginationModule, declarations: [NgxAdvancePaginationComponent], imports: [i1.CommonModule], exports: [NgxAdvancePaginationComponent] });
NgxAdvancePaginationModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NgxAdvancePaginationModule, imports: [[
i1.CommonModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NgxAdvancePaginationModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
NgxAdvancePaginationComponent
],
imports: [
i1.CommonModule
],
exports: [
NgxAdvancePaginationComponent
]
}]
}] });
/*
* Public API Surface of ngx-advance-pagination
*/
/**
* Generated bundle index. Do not edit.
*/
exports.NgxAdvancePaginationComponent = NgxAdvancePaginationComponent;
exports.NgxAdvancePaginationModule = NgxAdvancePaginationModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ngx-advance-pagination.umd.js.map