Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add custom text to primeng paginator

I would like to know if you can add custom text to the paginator row, more specifically, i would like it to have the total hits for the table on the right.

like image 729
David Pascoal Avatar asked Dec 22 '16 16:12

David Pascoal


2 Answers

<ng-template pTemplate="paginatorright">
  {{totalRecords}}
</ng-template>

and if you want to show page rows range then you can add like this,

<ng-template pTemplate="paginatorleft">
  Showing {{totalRecords < 1 ? 0 : first + 1}} to 
  {{totalRecords > 0 ? ((rows+ first) <= totalRecords ? (rows + first) : 
  totalRecords) : 0}} of {{totalRecords ? totalRecords : 0}} entries  
</ng-template>
like image 89
Anurag Avatar answered Oct 04 '22 18:10

Anurag


You can't add the custom text inside the Paginator row. But you can add the total hit just below the paginator using footer inside the table as

<p-footer>Total Hits:{{totalHits}}</p-footer>

Otherwise you can add the total hit above the paginator by making paginator seperate, for example

<p-dataTable [value]="data" [paginator]="false">....
<p-column field="Col1" header="Column 1"><p-column>
<p-footer>total Hits: {{totalHits}}</p-footer>
</p-dataTable>
<p-paginator rows="10" totalRecords="120" [rowsPerPageOptions]="[10,20,30]"></p-paginator>
like image 25
sainu Avatar answered Oct 04 '22 19:10

sainu