web-dev-qa-db-ja.com

カスタムテキストをページネーションに追加する方法

ページネーションの行にカスタムテキストを追加できるかどうか知りたいのですが、具体的には、右側のテーブルの合計ヒット数が欲しいです。

angularpaginationprimeng
9
David Pascoal
<ng-template pTemplate="paginatorright">
  {{totalRecords}}
</ng-template>

ページの行範囲を表示したい場合は、次のように追加できます。

<ng-template pTemplate="paginatorleft">
  Showing {{totalRecords < 1 ? 0 : first + 1}} to 
  {{totalRecords > 0 ? ((rows+ first) <= totalRecords ? (rows + first) : 
  totalRecords) : 0}} of {{totalRecords ? totalRecords : 0}} entries  
</ng-template>
6
Anurag

テーブルの下に手動で追加できます...

_<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;として宣言できます。

3
Guntram

Paginator行内にカスタムテキストを追加することはできません。ただし、次のようにテーブル内のフッターを使用して、ページネーションのすぐ下に合計ヒットを追加できます。

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

それ以外の場合は、ページネーションを別々にすることで、ページ上部に合計ヒットを追加できます。たとえば、

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

これは、priming datatable（angular）のpaginatorにカスタムテキストまたは合計行数を追加するための正確なソリューションです。

<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>
2
Alper Ebicoglu