How to add pagination and footer template in ngx-datatable?

Question

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,

Server Pagination with Paged I want to have the both Pagination and Footer Template in my Table.

What else is wrong my code?

Hydrazine

Answer 1

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>

Roshan

What about client side paging, how to handle that? Also its throwing table as undefined. – Assyrian

Sorry I didn’t use client side paging. – Graybeard

@PankajPrakash Just add #table to the <ngx-datatable> container. I also needed to add table.messages. before selectedMessage and totalMesage Then the regular paging works again. – Trocki