primeng paginatorにカスタムテキストを追加する方法

Question

paginatorの行にカスタムテキストを追加できるかどうかを知りたいと思います。具体的には、右側にテーブルのヒット数を合計したいと思います。

あなただけ手動でテーブルの下にそれを追加することができ

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がサーバーからデータをフェッチするときにコンポーネントによって設定されている

...

するスタイルのものを移動することを忘れないでくださいあなたのscss/less/cssに！ ;）

編集：フィルタされていないデータ数も値の長さに格納されます。 外部からテーブルにアクセスできない可能性があるため、コンポーネント内にViewChild('myCoolTable') myCoolTable;として宣言することができます。

Answer 2

Paginator行内にカスタムテキストを追加することはできません。しかし、あなたはそれ以外の場合は、あなたがこれは

<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

例えば、ページネータを別々にすることでページネータの上、合計ヒットを追加することができます

​​

として、テーブル内のフッターを使用してちょうどページネータ下の総ヒットを追加することができます

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