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.
How to add custom text to primeng paginator
21.7k views Asked by David Pascoal AtThere are 4 answers
This is the exact solution for adding custom text or total rows count on paginator for primeng datatable (angular):
<p-dataTable
[value]="myRecords"
rows="10"
[pageLinks]="5"
[paginator]="false"
[lazy]="true"
[totalRecords]="totalRecordsCount"
(onLazyLoad)="loadData($event)"
[responsive]="true">
<p-column field="" header="test"></p-column>
</p-dataTable>
<div style="position: relative;">
<p-paginator rows="10"
(onLazyLoad)="loadData($event)"
(onPageChange)="loadData($event)"
[totalRecords]="totalRecordsCount"
[rowsPerPageOptions]="[10, 25]">
</p-paginator>
<span style="position: absolute; top:3px; right:5px; margin: 5px;">Total records: {{totalRecordsCount}} </span>
</div>
You can just add it manually below the table...
<p-dataTable
#myCoolTable>
...
</p-dataTable>
<div style="position: absolute; bottom: 5px; right: 20px;">
filtered {{ myCoolTable.totalRecords }} from a total count of {{ myCoolTable.value.length }}
</div>
where totalEntriesCount is set by the component upon fetching the data from the server...
Remember to move the style stuff to your scss/less/css! ;)
Edit: The unfiltered data count is also stored in the length of the value.
It might be that the table is not accessible from outside, so you can declare it as a ViewChild('myCoolTable') myCoolTable;
in the component.
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>
and if you want to show page rows range then you can add like this,