Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to show pagination details in primeng datatable

In primeng datatable i am using filter and getting pagination. But want to pagination details.

eg:

showing 1 to 10 of 100 entries,

I am using datatable from following link.

https://www.primefaces.org/primeng-5.2.7/#/datatable/filter

like image 432
Raman Avatar asked Jan 26 '23 00:01

Raman


1 Answers

First set an event handler for onPage event which is triggered whenever pagination happens. Then set the custom pagination string on that handler.

    <p-dataTable [value]="cars" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]" (onPage)="setMyPagination(event)">
        <p-header>List of Cars</p-header>
        <p-column field="vin" header="Vin"></p-column>
        <p-column field="year" header="Year"></p-column>
        <p-column field="brand" header="Brand"></p-column>
        <p-column field="color" header="Color"></p-column>
        <ng-template pTemplate="paginatorLeft">
            {{myPaginationString}}
        </ng-template>
        <ng-template pTemplate="paginatorRight">
           {{myPaginationString}}
        </ng-template>
    </p-dataTable>`  
    myPaginationString = "";

setMyPagination(event) {
    //event.first: Index of first record being displayed 
    //event.rows: Number of rows to display in new page 
    //event.page: Index of the new page 
    //event.pageCount: Total number of pages
    let startRow = event.first + 1;
    let endRow =  startRow + event.rows;
    let totalRows = this.cars.length;
    this.myPaginationString  = "showing "+startRow +" to "+ endRow +" of "+ totalRows  +" entries"
}
like image 85
Tuhin Das Avatar answered Jan 28 '23 13:01

Tuhin Das