如何在primeng数据表中显示分页细节答案

【问题标题】：how to show pagination details in primeng datatable如何在primeng数据表中显示分页细节
【发布时间】：2021-07-06 20:18:52
【问题描述】：

在primeng 数据表中，我使用过滤器并获得分页。但想分页细节。

例如：

显示 100 个条目中的 1 到 10 个，

我正在使用以下链接中的数据表。

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

【问题讨论】：

标签： angular primeng

【解决方案1】：

首先为 onPage 事件设置一个事件处理程序，该事件在分页发生时触发。然后在该处理程序上设置自定义分页字符串。

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

【讨论】：

谢谢@Tuhin Das，你能提供一个关于stackblitz的工作演示
请务必让我通过演示回复您
是的，但需要从过滤列表中获取总记录，目前它将整个数据长度作为总记录

【解决方案2】：

你可以这样做：

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

【讨论】：

【解决方案3】：

用于将分页添加到 PrimeNG 表如下 -

创建一个支持对象来保存要使用 PrimeNG 数据表呈现的记录总数
```
 this.totalRecords=this.books.length;
```

接下来我们为数据表添加以下属性-

paginator - 我们将 paginate 属性设置为 true 以启用分页对于数据表
rows - 我们定义每页应显示多少行。
rowsPerPageOptions - 允许用户选择行数用户需要每页。
totalRecords - 数据表将保存的记录总数。我们在上面定义了这个支持对象。

pageLinks - 显示分页链接的数量。


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

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

【讨论】：