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

Issue

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

Solution

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

Answered By – Pramod C

Answer Checked By – Timothy Miller (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published