Angular 如何在Priming datatable中显示分页详细信息

在初始化数据表中，我使用过滤器并获得分页。 但我想知道分页的细节

例如：

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

我正在使用下面链接中的datatable

首先为onPage事件设置一个事件处理程序，该事件在分页时触发。然后在该处理程序上设置自定义分页字符串。
`    
汽车清单
{{myPaginationString}}
{{myPaginationString}}
`  
myPaginationString=“”；
`setMyPagination（事件）{
//event.first：显示的第一条记录的索引
//event.rows：要在新页面中显示的行数
//event.page：新页面的索引
//event.pageCount：总页数
让startRow=event.first+1；
让endRow=startRow+event.rows；
让totalRows=this.cars.length；
this.myPaginationString=“显示“+totalRows+”项中的“+startRow+”到“+endRow+”项”
}`

您可以这样做：

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

显示{{state.totalRecords}条目的{（state.page*state.rows）+1}}到{{state.rows*（state.page+1）}}

用于将分页添加到素描表，如下所示-

创建一个备份对象，以保存要使用Priming Datatable呈现的记录总数

this.totalRecords=this.books.length

接下来，我们将为datatable添加以下属性-

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

  
  {{col.header}}
  {{rowData[col.field]}
  

---

参考-

谢谢@Tuhin Das，你能提供stackblitzsure上的工作演示吗？让我带着演示返回给你是的，但需要从过滤列表中获取总记录，目前它将整个数据长度作为总记录

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

 this.totalRecords=this.books.length;

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