如何（动态）添加总行数？答案

【问题标题】：How can I add total number of rows (dynamically)?如何（动态）添加总行数？
【发布时间】：2019-03-10 03:16:32
【问题描述】：

这是我用于 Angular 和 PrimeNG P-table 的代码：

<p-table [columns]="cols" [value]="questions" selectionMode="single" [(selection)]="selectedQuestion"  [paginator]="true" [rowsPerPageOptions]="[10,15,20,50,1000]" [rows]="15" [responsive]="true" [autoLayout]="true"
        sortMode="multiple">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                    {{col.header}}
                    <p-sortIcon [field]="col.field"></p-sortIcon>
                </th>
            </tr>
        </ng-template>

        <ng-template pTemplate="paginatorleft">
            Showing {{dataTable?.dataToRender?.length}} rows
        </ng-template>

        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr [pSelectableRow]="rowData">
                <td *ngFor="let col of columns">
                    {{rowData[col.field]}}
                </td>
            </tr>
        </ng-template>
    </p-table>

我想在分页部分的左侧添加总行数，以便在例如使用一些过滤器 - 行数会自动减少。

在上面的代码 sn-p 中间 - 我试图添加该功能但没有工作（数字未显示）。有人有工作示例吗？

【问题讨论】：

我有点困惑，所以在这里你有行数据显示为 rowData 但对于行数 - 我们试图从 dataTable?.dataToRender?length?? 中获取它跨度>
@Jay 也有同样的问题。甚至 dataTable 是从哪里来的。
primefaces.org/primeng/#/table

标签： angular html-table primeng

【解决方案1】：

希望对你有帮助

<ng-template pTemplate="paginatorleft" let-state>
  {{state.rows}}
</ng-template>

state: $implicit state.page: 当前页面
state.rows：每页的行数
state.first：第一条记录的索引
state.totalRecords：总记录数

https://stackblitz.com/edit/angular-6he3b2在提供者搜索html下看

https://www.primefaces.org/primeng/#/table

【讨论】：

谢谢，我尝试了这个和state.totalRecords 并且很接近但还不完美..如果有例如10 页，每页有 15 条记录 - 预计总共有 150 条记录。但是 - 它显示 15（第一页的总记录）。
.rows 显示您分配给每页显示的行数（在表格顶部 [rows]="15"，totalRecord 是整个表格上的记录总数。不幸的是primeng 没有您想要的东西。您必须自己构建它
@Joe 见上面的评论
谢谢。我尝试使用state.totalRecords 和奇怪的东西第一次显示为 0。如果我点击“第 2 页”，它会将数字从 0 更新为例如83（表中的记录总数）。想知道这是否是库中的故障，或者我需要在“第一次通过”期间以某种方式activate。
@Joe 嗯嗯，这很奇怪。你看到我更新的答案了吗？我在那里有一个工作的 stackbliz，它应该从一开始就记录的总数不需要触发任何东西

【解决方案2】：

希望有人觉得这很有用：

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

给予：

【讨论】：