primeng
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [ • 10.7 kB
JavaScript
import { EventEmitter, ChangeDetectorRef, Input, Output, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { DropdownModule } from 'primeng/dropdown';
import { SharedModule } from 'primeng/api';
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
let Paginator = class Paginator {
constructor(cd) {
this.cd = cd;
this.pageLinkSize = 5;
this.onPageChange = new EventEmitter();
this.alwaysShow = true;
this.dropdownScrollHeight = '200px';
this.currentPageReportTemplate = '{currentPage} of {totalPages}';
this.totalRecords = 0;
this.rows = 0;
this._first = 0;
}
ngOnInit() {
this.updatePaginatorState();
}
ngOnChanges(simpleChange) {
if (simpleChange.totalRecords) {
this.updatePageLinks();
this.updatePaginatorState();
this.updateFirst();
this.updateRowsPerPageOptions();
}
if (simpleChange.first) {
this._first = simpleChange.first.currentValue;
this.updatePageLinks();
this.updatePaginatorState();
}
if (simpleChange.rows) {
this.updatePageLinks();
this.updatePaginatorState();
}
if (simpleChange.rowsPerPageOptions) {
this.updateRowsPerPageOptions();
}
}
get first() {
return this._first;
}
set first(val) {
this._first = val;
}
updateRowsPerPageOptions() {
if (this.rowsPerPageOptions) {
this.rowsPerPageItems = [];
for (let opt of this.rowsPerPageOptions) {
if (typeof opt == 'object' && opt['showAll']) {
this.rowsPerPageItems.push({ label: opt['showAll'], value: this.totalRecords });
}
else {
this.rowsPerPageItems.push({ label: String(opt), value: opt });
}
}
}
}
isFirstPage() {
return this.getPage() === 0;
}
isLastPage() {
return this.getPage() === this.getPageCount() - 1;
}
getPageCount() {
return Math.ceil(this.totalRecords / this.rows) || 1;
}
calculatePageLinkBoundaries() {
let numberOfPages = this.getPageCount(), visiblePages = Math.min(this.pageLinkSize, numberOfPages);
//calculate range, keep current in middle if necessary
let start = Math.max(0, Math.ceil(this.getPage() - ((visiblePages) / 2))), end = Math.min(numberOfPages - 1, start + visiblePages - 1);
//check when approaching to last page
var delta = this.pageLinkSize - (end - start + 1);
start = Math.max(0, start - delta);
return [start, end];
}
updatePageLinks() {
this.pageLinks = [];
let boundaries = this.calculatePageLinkBoundaries(), start = boundaries[0], end = boundaries[1];
for (let i = start; i <= end; i++) {
this.pageLinks.push(i + 1);
}
}
changePage(p) {
var pc = this.getPageCount();
if (p >= 0 && p < pc) {
this._first = this.rows * p;
var state = {
page: p,
first: this.first,
rows: this.rows,
pageCount: pc
};
this.updatePageLinks();
this.onPageChange.emit(state);
this.updatePaginatorState();
}
}
updateFirst() {
const page = this.getPage();
if (page > 0 && this.totalRecords && (this.first >= this.totalRecords)) {
Promise.resolve(null).then(() => this.changePage(page - 1));
}
}
getPage() {
return Math.floor(this.first / this.rows);
}
changePageToFirst(event) {
if (!this.isFirstPage()) {
this.changePage(0);
}
event.preventDefault();
}
changePageToPrev(event) {
this.changePage(this.getPage() - 1);
event.preventDefault();
}
changePageToNext(event) {
this.changePage(this.getPage() + 1);
event.preventDefault();
}
changePageToLast(event) {
if (!this.isLastPage()) {
this.changePage(this.getPageCount() - 1);
}
event.preventDefault();
}
onPageLinkClick(event, page) {
this.changePage(page);
event.preventDefault();
}
onRppChange(event) {
this.changePage(this.getPage());
}
updatePaginatorState() {
this.paginatorState = {
page: this.getPage(),
pageCount: this.getPageCount(),
rows: this.rows,
first: this.first,
totalRecords: this.totalRecords
};
}
get currentPageReport() {
return this.currentPageReportTemplate
.replace("{currentPage}", String(this.getPage() + 1))
.replace("{totalPages}", String(this.getPageCount()))
.replace("{first}", String(this._first + 1))
.replace("{last}", String(Math.min(this._first + this.rows, this.totalRecords)))
.replace("{rows}", String(this.rows))
.replace("{totalRecords}", String(this.totalRecords));
}
};
Paginator.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
__decorate([
Input()
], Paginator.prototype, "pageLinkSize", void 0);
__decorate([
Output()
], Paginator.prototype, "onPageChange", void 0);
__decorate([
Input()
], Paginator.prototype, "style", void 0);
__decorate([
Input()
], Paginator.prototype, "styleClass", void 0);
__decorate([
Input()
], Paginator.prototype, "alwaysShow", void 0);
__decorate([
Input()
], Paginator.prototype, "templateLeft", void 0);
__decorate([
Input()
], Paginator.prototype, "templateRight", void 0);
__decorate([
Input()
], Paginator.prototype, "dropdownAppendTo", void 0);
__decorate([
Input()
], Paginator.prototype, "dropdownScrollHeight", void 0);
__decorate([
Input()
], Paginator.prototype, "currentPageReportTemplate", void 0);
__decorate([
Input()
], Paginator.prototype, "showCurrentPageReport", void 0);
__decorate([
Input()
], Paginator.prototype, "totalRecords", void 0);
__decorate([
Input()
], Paginator.prototype, "rows", void 0);
__decorate([
Input()
], Paginator.prototype, "rowsPerPageOptions", void 0);
__decorate([
Input()
], Paginator.prototype, "first", null);
Paginator = __decorate([
Component({
selector: 'p-paginator',
template: `
<div [class]="styleClass" [ngStyle]="style" [ngClass]="'ui-paginator ui-widget ui-widget-header ui-unselectable-text ui-helper-clearfix'"
*ngIf="alwaysShow ? true : (pageLinks && pageLinks.length > 1)">
<div class="ui-paginator-left-content" *ngIf="templateLeft">
<ng-container *ngTemplateOutlet="templateLeft; context: {$implicit: paginatorState}"></ng-container>
</div>
<span class="ui-paginator-current" *ngIf="showCurrentPageReport">{{currentPageReport}}</span>
<a [attr.tabindex]="isFirstPage() ? null : '0'" class="ui-paginator-first ui-paginator-element ui-state-default ui-corner-all"
(click)="changePageToFirst($event)" (keydown.enter)="changePageToFirst($event)" [ngClass]="{'ui-state-disabled':isFirstPage()}" [tabindex]="isFirstPage() ? -1 : null">
<span class="ui-paginator-icon pi pi-step-backward"></span>
</a>
<a tabindex="0" [attr.tabindex]="isFirstPage() ? null : '0'" class="ui-paginator-prev ui-paginator-element ui-state-default ui-corner-all"
(click)="changePageToPrev($event)" (keydown.enter)="changePageToPrev($event)" [ngClass]="{'ui-state-disabled':isFirstPage()}" [tabindex]="isFirstPage() ? -1 : null">
<span class="ui-paginator-icon pi pi-caret-left"></span>
</a>
<span class="ui-paginator-pages">
<a tabindex="0" *ngFor="let pageLink of pageLinks" class="ui-paginator-page ui-paginator-element ui-state-default ui-corner-all"
(click)="onPageLinkClick($event, pageLink - 1)" (keydown.enter)="onPageLinkClick($event, pageLink - 1)" [ngClass]="{'ui-state-active': (pageLink-1 == getPage())}">{{pageLink}}</a>
</span>
<a [attr.tabindex]="isLastPage() ? null : '0'" class="ui-paginator-next ui-paginator-element ui-state-default ui-corner-all"
(click)="changePageToNext($event)" (keydown.enter)="changePageToNext($event)" [ngClass]="{'ui-state-disabled':isLastPage()}" [tabindex]="isLastPage() ? -1 : null">
<span class="ui-paginator-icon pi pi-caret-right"></span>
</a>
<a [attr.tabindex]="isLastPage() ? null : '0'" class="ui-paginator-last ui-paginator-element ui-state-default ui-corner-all"
(click)="changePageToLast($event)" (keydown.enter)="changePageToLast($event)" [ngClass]="{'ui-state-disabled':isLastPage()}" [tabindex]="isLastPage() ? -1 : null">
<span class="ui-paginator-icon pi pi-step-forward"></span>
</a>
<p-dropdown [options]="rowsPerPageItems" [(ngModel)]="rows" *ngIf="rowsPerPageOptions"
(onChange)="onRppChange($event)" [appendTo]="dropdownAppendTo" [scrollHeight]="dropdownScrollHeight"></p-dropdown>
<div class="ui-paginator-right-content" *ngIf="templateRight">
<ng-container *ngTemplateOutlet="templateRight; context: {$implicit: paginatorState}"></ng-container>
</div>
</div>
`,
changeDetection: ChangeDetectionStrategy.Default
})
], Paginator);
let PaginatorModule = class PaginatorModule {
};
PaginatorModule = __decorate([
NgModule({
imports: [CommonModule, DropdownModule, FormsModule, SharedModule],
exports: [Paginator, DropdownModule, FormsModule, SharedModule],
declarations: [Paginator]
})
], PaginatorModule);
/**
* Generated bundle index. Do not edit.
*/
export { Paginator, PaginatorModule };
//# sourceMappingURL=primeng-paginator.js.map