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

Question

在 primeng 数据表中，我正在使用过滤器并进行分页。但是想要分页详情。

例如：

显示第 1 到 10 个条目，共 100 个条目，

我正在使用来自以下 link 的数据表。

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

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

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

Answer 3

为PrimeNG添加分页Table如下-

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

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

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

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


 <p-table [columns]="cols" [value]="books" <b>[paginator]="true" [rows]="10" [rowsPerPageOptions]="[5,10,15,20]"
          totalRecords="totalRecords" pageLinks="3"></b>
          <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>
</pre>

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

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

how to show pagination details in primeng datatable

primeng

angular