如何在primeng数据表中显示分页详细信息

Question

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

Answer 1

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

Answer 2

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>

Answer 3

For adding Pagination to PrimeNG Table as follows -

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