I have the Following html code,
<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>
that has the following result, Server Pagination without Paged
If i remove the <ngx-datatable-footer> ... </ngx-datatable-footer>
in the above mentioned code i got the below result,
I want to have the both Pagination and Footer Template in my Table.
What else is wrong my code?
You have to add component into your ngx-datatable-footer-template. If you check the code of footer component , you can see that default pager exists only if footer template is not defined.
You can check this demo to see how to add pager in custom 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.