时间戳

首页 > 解决方案 > 为什么使用 p-table 的 p-pagination 不起作用

angular - 为什么使用 p-table 的 p-pagination 不起作用

问题描述

我正在实施p 分页，p 表中的数据应该相应地反映。如果我在p-table中通过[pagination]="true"使用它，但我想实现的是使用 paginationModule。在这种情况下，数据不会根据分页中的页面选择显示。请帮我。

<p-dialog 
  [(visible)]="mSerivce.isAuditDialogVisible"
  [draggable]="false"
  [closable]="true"
  showEffect="fade"
  [contentStyle]="{width:'800px', height:'400px'}" >
  <p-header>
    Audit History
  </p-header>
  <p-table [value]="auditHistoryList" [columns]="auditGridColumns" [responsive]="true">
    <ng-template pTemplate="colgroup" let-columns>
      <colgroup>
        <col *ngFor="let col of columns" [style.width]="col.style" />
      </colgroup>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
      <tr class="st-sub-header">
        <th *ngFor="let col of columns">
          {{col.header}}
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" class="tb-body" let-rowIndex="rowIndex" let-rowData let-expanded="expanded" let-columns="columns">
      <tr>
        <td class="h-90 mh-20">{{rowData.action || '-'}}</td>
        <td class="h-90">{{rowData.user}}</td>
        <td class="h-90">{{rowData.createdDate || '-'}}</td>
        <td class="h-90" [innerHTML]="rowData?.comments || '-'"></td>
      </tr>
    </ng-template>
    <ng-template pTemplate="emptymessage" let-columns>
      <tr>
        <td colspan="4">
          No records found
        </td>
      </tr>
    </ng-template>
  </p-table>
  <p-footer>
    <p-paginator [rows]="2" [totalRecords]="auditHistoryList.length" pageLinkSize="3"></p-paginator>
  </p-footer>
</p-dialog>

标签： angularprimeng

解决方案

我有一个类似的问题。但是，我可以看到您的代码和我的代码之间的唯一区别是您使用分页器的方式。也许您可以尝试以这种方式更改它：

<p-table #myTable [value]="auditHistoryList" [paginator]="true" [rows]="2">
...

在您的 .ts 中，如果您添加新行，您可以通过以下方式更新 totalRecords：

this.auditHistoryList.push(auditHistory);
this.myTable.totalRecords = this.auditHistoryList.value.length;

考虑到 myTable 是 p-table 组件的 ViewChild：

import { Table } from 'primeng/table';
...
@ViewChild(Table, {static: false}) myTable : Table;

我希望这会有所帮助。

推荐阅读