How to add custom text to primeng paginator

Question

I would like to know if you can add custom text to the paginator line, or rather, I would like it to have the total number of hits for the table on the right.

Answer 1

You cannot add custom text inside the Paginator line. But you can add the overall hit just below the page using the footer inside the table, like

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

Otherwise, you can add the total number of hits over the page by doing a separate pagination, 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> 

Answer 2

You can simply add it manually under 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 when retrieving data from the server ...

Remember to move the style stuff to your scss / less / css !;)

Edit: The number of unfiltered data is also stored in the length of the value. It is possible that the table is not accessible from the outside, so you can declare it as ViewChild('myCoolTable') myCoolTable; in the component.

Answer 3

This is the exact solution to add a custom text or total number of rows to the 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>