CODEWITHSUNDEEP
angularprimeng
Abhinav Gupta
Abhinav Gupta

Reputation: 31

Why p-pagination with p-table not working

I'm implementing p-pagination and data in p-table should reflect accordingly. It's working if I use it by [pagination]="true" in p-table but i want to implement is using paginationModule. In that case data is not showing based on page selection in pagination. Please help me.

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

Upvotes: 2

Views: 4056

Answers (1)

jmoran
jmoran

Reputation: 164

I had a similar problem. However, the only difference I could see between your code and mine is how you are using paginator. Maybe you could try changing it this way:

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

And in your .ts, in the event where you add a new row you can update the totalRecords this way:

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

Having account that myTable is the ViewChild of the p-table component:

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

I hope this will be helpful.

Upvotes: 1

Related Questions