CODEWITHSUNDEEP
angularpaginationpaginatorprimeng
Pramod C
Pramod C

Reputation: 71

Option to put pagination top and bottom of the Datatable component of PrimeNG

Is there any way we can put paginator on the top and bottom of the table. I tried putting the paginator components to the bottom and top but it's not syncing. The top and bottom paginator act as two different components. Any way to sync both? See below the component http://www.primefaces.org/primeng/#/datatablepaginator

<p-paginator [rows]="rows" [first]="first" [totalRecords]="totalRecords" [pageLinkSize]="pageLinks" styleClass="ui-paginator-bottom" (onPageChange)="paginate($event)" [rowsPerPageOptions]="rowsPerPageOptions" *ngIf="paginator"></p-paginator>

added above component to the top of the data table

Change is in the file src/components/datatable/datatable.ts(line no 22 and 142)

Please see the plnkr(I have added only the necessary primeng components to run)

http://plnkr.co/edit/Ii53rw9IDtKb7G8vwY5e?p=preview

Upvotes: 3

Views: 12314

Answers (2)

Kumbirai Bodzo
Kumbirai Bodzo

Reputation: 35

There is an option

paginatorPosition="top|bottom|both"

In your case you can use "both" option

Upvotes: 3

Pramod C
Pramod C

Reputation: 71

I have fixed it by implementing onChanges in paginator.ts

import {Component, ElementRef, Input, Output, SimpleChange, EventEmitter,   OnChanges} from '@angular/core';
//Method implemented
ngOnChanges() {
    this.updatePageLinks();
    this.calculatePageLinkBoundaries();
}

So for each change it will calculate the page boundaries and page links and update accordingly.

See the updated plunk

http://plnkr.co/edit/Ii53rw9IDtKb7G8vwY5e?p=preview

Upvotes: 2

Related Questions