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

Question

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

例如:

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

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

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