2

I want to update totalRecords of primeng table when data get from API

this.customerService.getData().subscribe(data=> 
this.dataApi = data.users;
this.dataTotalRecords = data.total;
});

<p-table [value]="dataApi" [totalRecords]='dataTotalRecords' [rows]="10"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"></p-table>

In my case, it's showing "Showing 1 to 10 of 30 entries". dataApi.length = 30 and dataTotalRecords is 100. So, I want to show as "Showing 1 to 10 of 100 entries".Even though, I set it as explicitly [totalRecords]='dataTotalRecords' , couldn't make it.

Please help me to fix this problem.

neeravi
  • 21
  • 3

2 Answers2

0

Add below lines of code in your typescript

 @ViewChild('dt1',{static:true}) dt1: Table;
 ngOnchanges(){
 this.dt1.totalRecords = this.totalRecords;
 this.dt1._totalRecords = this.totalRecords;
 }

In html

<p-table #dt1  [value]="tableData" currentPageReportTemplate="Showing 
{first} to {last} of {{totalRecords}} entries"
[globalFilterFields]="searchHeader" [paginator]="true" 
[rowsPerPageOptions]="[1,2,3]"
[lazy]="true">
Sriram M P
  • 1
-1

Set the [lazy]="true" property on the <p-table> element.

AsGoodAsItGets
  • 2,886
  • 34
  • 49