CODEWITHSUNDEEP
angularprimeng
Raman
Raman

Reputation: 353

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

Upvotes: 5

Views: 20774

Answers (3)

Tuhin Das
Tuhin Das

Reputation: 499

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"
}

Upvotes: 5

Rehan
Rehan

Reputation: 1039

For adding Pagination to PrimeNG Table as follows -

enter image description here

  1. Create a backing object to hold the total number of records to be rendered using PrimeNG Datatable

     this.totalRecords=this.books.length;

Next we adding the following attributes for the datatable-

  • paginator - We set the paginate property to true to enable Pagination for the datatable
  • rows - We define how many rows should be displayed per page.
  • rowsPerPageOptions - Allow the user to choose the number of rows user wants per page.
  • totalRecords - The total number of records the data table will hold. We define this backing object above.

  • pageLinks - Show the number of Pagination links. 

    
 <p-table [columns]="cols" [value]="books" [paginator]="true" [rows]="10" [rowsPerPageOptions]="[5,10,15,20]"
          totalRecords="totalRecords" pageLinks="3">
          <ng-template pTemplate="header" let-columns>
            <tr>
              <th *ngFor="let col of columns">
                {{col.header}}
              </th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr>
              <td *ngFor="let col of columns">
                {{rowData[col.field]}}
              </td>
            </tr>
          </ng-template>
        </p-table>

Reference - PrimeNG Tutorial - DataTable Pagination (Paginator) Example with Source Code and Video Tutorial

Upvotes: 0

Nitin Avula
Nitin Avula

Reputation: 349

You could do this:

<ng-template pTemplate="paginatorleft" let-state>
        Showing {{(state.page  * state.rows) + 1}} to {{state.rows * (state.page + 1)}} of {{state.totalRecords}} entries
  </ng-template>

Upvotes: 3

Related Questions