Jak dodać niestandardowy tekst do strony pierwotnej paginator

Question

Chciałbym wiedzieć, czy można dodać niestandardowy tekst do wiersza paginatora, a dokładniej, chciałbym, aby miały wszystkie trafienia dla tabeli po prawej stronie.

Answer 1

można po prostu dodać go ręcznie pod tabelą ...

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

gdzie totalEntriesCount jest ustawiony przez komponent na pobieranie danych z serwera ...

Pamiętaj, aby przenieść rzeczy w stylu do twojego scss/less/css! ;)

Edytuj: Niefiltrowana liczba danych jest również przechowywana w długości wartości. Możliwe, że tabela nie jest dostępna z zewnątrz, więc możesz ją zadeklarować jako ViewChild('myCoolTable') myCoolTable; w komponencie.

Answer 2

Nie można dodać niestandardowego tekstu wewnątrz wiersza paginatora. Ale można dodać całkowitą trafienie tuż poniżej paginator użyciu stopki wewnątrz tabeli jako

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

W przeciwnym razie można dodać całkowitą trafienie powyżej paginator przez co paginator indywidualne, na przykład

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

Jest dokładne rozwiązanie dodawania niestandardowy tekst lub wierszy z liczyć paginator do primeng DataTable (kąt)

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