diff --git a/src/app/components/paginator/paginator.ts b/src/app/components/paginator/paginator.ts index 328718139c8..adc75e2310d 100755 --- a/src/app/components/paginator/paginator.ts +++ b/src/app/components/paginator/paginator.ts @@ -41,159 +41,121 @@ import { PaginatorState } from './paginator.interface';
- - + {{ currentPageReport }} + + + - - - - - - - {{ currentPageReport }} - - - - - - - - - - {{ currentPageReport }} - - - - - - - + + {{ currentPageReport }} + + + - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + - - + + + + +
@@ -335,22 +297,6 @@ export class Paginator implements OnInit, AfterContentInit, OnChanges { @ContentChildren(PrimeTemplate) templates: Nullable>; - firstPageLinkTemplate: Nullable>; - - prevPageLinkTemplate: Nullable>; - - pageLinksTemplate: Nullable>; - - nextPageLinkTemplate: Nullable>; - - lastPageLinkTemplate: Nullable>; - - rowsPerPageDropdownTemplate: Nullable>; - - jumpToPageDropdownTemplate: Nullable>; - - jumpToPageInputTemplate: Nullable>; - dropdownIconTemplate: Nullable>; firstPageLinkIconTemplate: Nullable>; @@ -401,38 +347,6 @@ export class Paginator implements OnInit, AfterContentInit, OnChanges { ngAfterContentInit(): void { (this.templates as QueryList).forEach((item) => { switch (item.getType()) { - case 'firstpagelink': - this.firstPageLinkTemplate = item.template; - break; - - case 'prevpagelink': - this.prevPageLinkTemplate = item.template; - break; - - case 'pagelinks': - this.pageLinksTemplate = item.template; - break; - - case 'nextpagelink': - this.nextPageLinkTemplate = item.template; - break; - - case 'lastpagelink': - this.lastPageLinkTemplate = item.template; - break; - - case 'rowsperpagedropdown': - this.rowsPerPageDropdownTemplate = item.template; - break; - - case 'jumptopagedropdown': - this.jumpToPageDropdownTemplate = item.template; - break; - - case 'jumptopageinput': - this.jumpToPageInputTemplate = item.template; - break; - case 'dropdownicon': this.dropdownIconTemplate = item.template; break; @@ -571,14 +485,6 @@ export class Paginator implements OnInit, AfterContentInit, OnChanges { return Math.floor(this.first / this.rows); } - getFirst(): number { - return this.totalRecords > 0 ? this._first + 1 : 0; - } - - getLast(): number { - return Math.min(this._first + this.rows, this.totalRecords); - } - changePageToFirst(event: Event) { if (!this.isFirstPage()) { this.changePage(0); @@ -645,8 +551,6 @@ export class Paginator implements OnInit, AfterContentInit, OnChanges { .replace('{rows}', String(this.rows)) .replace('{totalRecords}', String(this.totalRecords)); } - - } @NgModule({ @@ -654,4 +558,4 @@ export class Paginator implements OnInit, AfterContentInit, OnChanges { exports: [Paginator, DropdownModule, InputNumberModule, FormsModule, SharedModule], declarations: [Paginator] }) -export class PaginatorModule {} +export class PaginatorModule {} \ No newline at end of file diff --git a/src/app/showcase/doc/paginator/templatedoc.ts b/src/app/showcase/doc/paginator/templatedoc.ts index cd30fe3a876..3e0b0944988 100644 --- a/src/app/showcase/doc/paginator/templatedoc.ts +++ b/src/app/showcase/doc/paginator/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '@domain/code'; +import { Code } from '../../domain/code'; interface PageEvent { first: number; @@ -12,28 +12,67 @@ interface PageEvent { selector: 'template-doc', template: ` -

- Paginator elements can be customized using the pTemplate property. -

+

Templating allows overriding the default content of the UI elements by defining callbacks using the element name.

 -
- - - ({{ currentPage }} of {{ totalPages }}) - - -
- +
+
+
+ +
+
+ +
+
+ +
+
+ +
+ Items per page: + + +
+ +
+
+ Items per page: + +
+
- -
+ ` }) export class TemplateDoc { - first: number = 0; + first1: number = 0; + + rows1: number = 10; + + first2: number = 0; + + rows2: number = 10; - rows: number = 1; + first3: number = 0; + + rows3: number = 10; totalRecords: number = 120; @@ -44,27 +83,37 @@ export class TemplateDoc { { label: 120, value: 120 } ]; - onPageChange(event: PageEvent) { - this.first = event.first; - this.rows = event.rows; + onPageChange1(event: PageEvent) { + this.first1 = event.first; + this.rows1 = event.rows; + } + + onPageChange2(event: PageEvent) { + this.first2 = event.first; + this.rows2 = event.rows; + } + + onPageChange3(event: PageEvent) { + this.first3 = event.first; + this.rows3 = event.rows; } code: Code = { basic: `
- +
- +
- +
Items per page: - +
@@ -72,46 +121,49 @@ export class TemplateDoc {
Items per page: - +
`, - html: ` -
+ html: `
- +
- +
- +
- +
Items per page: - +
- +
Items per page: - +
`, - typescript: ` -import { Component } from '@angular/core'; - + typescript: `import { Component } from '@angular/core'; +import { PaginatorModule } from 'primeng/paginator'; +import { ButtonModule } from 'primeng/button'; +import { DividerModule } from 'primeng/divider'; +import { SliderModule } from 'primeng/slider'; +import { FormsModule } from '@angular/forms'; + interface PageEvent { first: number; rows: number; @@ -121,7 +173,9 @@ interface PageEvent { @Component({ selector: 'paginator-template-demo', - templateUrl: './paginator-template-demo.html' + templateUrl: './paginator-template-demo.html', + standalone: true, + imports: [PaginatorModule, ButtonModule, DividerModule, SliderModule, FormsModule] }) export class PaginatorTemplateDemo { first1: number = 0;