web-dev-qa-db-ja.com

ngx-datatableフッターのカスタマイズ

Ngxデータテーブルをカスタマイズする方法。この合計レコード数を削除し、ページごとのアイテムを表示するためにドロップダウンで置き換えるためにコードを変更する必要がある場所を見つけることができません。私のページネーションにもいくつかのアイコンがありません。

enter image description here

ngx-datatable
11
WebDev

カスタムフッターテンプレートを使用します（下のリンクを参照）。デフォルトのフッターを上書きします。

https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/footer.component.ts

例

フッターを取り除くだけの場合は、次のように使用します。

<ngx-datatable-footer></ngx-datatable-footer>

カスタマイズしたい場合：

<ngx-datatable-footer>
  <ng-template
    ngx-datatable-footer-template
    let-rowCount="rowCount"
    let-pageSize="pageSize"
    let-selectedCount="selectedCount"
    let-curPage="curPage"
    let-offset="offset"
  >
    <div style="padding: 5px 10px">
      <div><strong>Summary</strong>: Gender: Female</div>
      <hr style="width:100%" />
      <div>
        Rows: {{ rowCount }} | Size: {{ pageSize }} | Current:
        {{ curPage }} | Offset: {{ offset }}
      </div>
    </div>
  </ng-template>
</ngx-datatable-footer>
11
Gayantha

ただし、「合計」または「アイテムが見つかりません」のみを変更する場合は、メッセージプロパティを上書きします。

//Static messages in the table you can override for localization.
{
  // Message to show when array is presented
  // but contains no values
  emptyMessage: 'No data to display',
  // Footer total message
  totalMessage: 'total'
}

https://swimlane.gitbooks.io/ngx-datatable/api/table/inputs.html

1
Sebastian Rosiński