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

3
votes

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

2
angularpaginationpaginatorprimeng
which line of code is responsible for adding paginator on bottom and top? – Ravinder Kumar

2 Answers

2
votes

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

0
votes

There is an option

paginatorPosition="top|bottom|both"

In your case you can use "both" option