Question

我正在实现 p分页，并且 p表中的数据应相应反映。如果我通过 p表中的 [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>

Answer 1

我有类似的问题。但是，我能看到的代码和我的代码之间的唯一区别是您使用paginator的方式。也许您可以尝试通过以下方式进行更改：

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

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

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

说明myTable是p表组件的ViewChild：

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

我希望这会有所帮助。

为什么用p表进行p分页不起作用

1 个答案: