Nasıl primeng paginator için özel metin ekleme

Question

Özellikle paginator satırına özel metin ekleyip ekleyemeyeceğinizi bilmek istiyorum, özellikle sağdaki tablo için toplam isabetler olmasını istiyorum.

Sadece elle masanın altına ekleyebilirsiniz

Answer 1

...

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

totalEntriesCount Sunucudan veri alınırken üzerine bileşen tarafından ayarlanır

...

tarzı malzeme taşımak hatırla scss/less/css için! ;)

Düzenleme: Filtrelenmemiş veri sayısı da değerin uzunluğunda saklanır. Tablonun dışarıdan erişilememesi olabilir, bu yüzden bileşene ViewChild('myCoolTable') myCoolTable; olarak bildirebilirsiniz.

Answer 2

Özel metni Paginator satırına ekleyemezsiniz. Ama Aksi takdirde budur

<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

örneğin paginator ayrı yaparak paginator yukarıdaki toplam hit ekleyebilir

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

olarak tablo içinde alt bilgi kullanımı sadece paginator altında toplam hit ekleyebilir özel metin veya satırların eklemek için kesin çözüm primeng datatable (açısal) için paginator güvenebilir:

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