私は次のHTMLコードを持っています、
<ngx-datatable
class="material"
[rows]="rows"
[columns]="[{name:'Name'},{name:'Age'},{name:'Company'}]"
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="'auto'"
[externalPaging]="true"
[count]="page.totalElements"
[offset]="page.pageNumber"
[limit]="page.size"
(page)='getValue($event)'
[selected]="selected"
[selectionType]="'checkbox'"
(activate)="onActivate($event)"
(select)='onSelect($event)' >
<ngx-datatable-column
[width]="30"
[sortable]="false"
[canAutoResize]="false"
[draggable]="false"
[resizeable]="false"
[headerCheckboxable]="true"
[checkboxable]="true">
</ngx-datatable-column>
<ngx-datatable-column name="Name">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
{{value}} <i [innerHTML]="row['age']"></i> years old
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Age">
<ng-template let-column="column" ngx-datatable-header-template>
Combined Properties
</ng-template>
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<div style="border:solid 1px #ddd;margin:5px;padding:3px">
<div style="background:#999;height:10px" [style.width]="value + '%'"></div>
{{row['name']}}, passed their life of {{value}}%
</div>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Company">
<ng-template let-value="value" ngx-datatable-cell-template>
{{value}}
</ng-template>
</ngx-datatable-column>
<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>
Rows: {{rowCount}} |
Size: {{pageSize}} |
Current: {{curPage}} |
Offset: {{offset}} |
Selected: {{selectedCount}}
</div>
</div>
</ng-template>
</ngx-datatable-footer>
</ngx-datatable>
次の結果があります Pagedのないサーバーページネーション
上記のコードで<ngx-datatable-footer> ... </ngx-datatable-footer>
を削除すると、次の結果が得られました。
テーブルにページネーションとフッターの両方のテンプレートが必要です。
コードに他に何が間違っていますか?
コンポーネントをngx-datatable-footer-templateに追加する必要があります。 フッターコンポーネントのコードを確認 の場合、フッターテンプレートが定義されていない場合にのみ、デフォルトのページャーが存在することがわかります。
このデモを確認できます カスタムフッターテンプレートにページャーを追加する方法を確認します。
<ngx-datatable-footer>
<ng-template
ngx-datatable-footer-template
let-rowCount="rowCount"
let-pageSize="pageSize"
let-selectedCount="selectedCount"
let-curPage="curPage"
let-offset="offset"
let-isVisible="isVisible">
<div class="page-count">
<span *ngIf="selectedMessage">
{{selectedCount.toLocaleString()}} {{selectedMessage}} /
</span>
{{rowCount.toLocaleString()}} {{totalMessage}}
</div>
<datatable-pager
[pagerLeftArrowIcon]="'datatable-icon-left'"
[pagerRightArrowIcon]="'datatable-icon-right'"
[pagerPreviousIcon]="'datatable-icon-prev'"
[pagerNextIcon]="'datatable-icon-skip'"
[page]="curPage"
[size]="pageSize"
[count]="rowCount"
[hidden]="!((rowCount / pageSize) > 1)"
(change)="table.onFooterPage($event)">
</datatable-pager>
</ng-template>
</ngx-datatable-footer>