Install

npm install no-page-datatable-footer --save

Basic Example

import { NoPageDatatableFooterModule } from 'no-page-datatable-footer';

const noPageFooterSettings: any = {
  labels: {
    showNumber: '显示行数',
    statistical: '正在统计',
    total: '共',
    line: '行',
    page: '页'
  }
};

@NgModule({
   declarations: [
       ...
   ],
   imports: [
       ...
      NoPageDatatableFooterModule.forRoot(noPageFooterSettings),
   ],
   providers: [
       ...
   ]
})

Graphql

<ngx-datatable
  ngxNoPageFooterGraphqlWatcher
  [isRetainCurrentPageQuery]="true"
  class="material"
  [footer]="footer"
  [count]="currentNumber"
  headerHeight="40"
  [columnMode]="'force'"
  [rows]="labelList"
  [loadingIndicator]="loading"
  [selectionType]="'checkbox'"
  [selectAllRowsOnPage]="false"
  [ngxQuery]="ngxQuery"
  externalPaging="true"
  (loadValue)="getLabel($event)"
>
  <ngx-datatable-column
    [width]="30"
    [sortable]="false"
    [canAutoResize]="false"
    [draggable]="false"
    [resizeable]="false"
    [headerCheckboxable]="false"
    [checkboxable]="false"
  >
  </ngx-datatable-column>
  <ngx-datatable-column
    [resizeable]="false"
    [draggable]="false"
    [sortable]="false"
    name="姓名"
    prop="name"
  >
    <ng-template let-row="row" ngx-datatable-cell-template>
      <span title="{{row.name}}">{{row.name}}</span>
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>
<hr />
<nopage-datatable-footer
  #footer
  [page]="page"
  [currentNumber]="currentNumber"
  [totalNumber]="totalNumber"
  [sizeList]="sizeList"
  (getTotal)="getTotal()"
>
</nopage-datatable-footer>

Restful

<ngx-datatable
  ngxNoPageFooterWatcher
  class="material"
  [footer]="footer"
  [count]="currentNumber"
  headerHeight="40"
  [columnMode]="'force'"
  [rows]="labelList"
  [loadingIndicator]="loading"
  [selectionType]="'checkbox'"
  [selectAllRowsOnPage]="false"
  [ngxQuery]="ngxQuery"
  externalPaging="true"
  (loadValue)="getLabel($event)"
>
  <ngx-datatable-column
    [width]="30"
    [sortable]="false"
    [canAutoResize]="false"
    [draggable]="false"
    [resizeable]="false"
    [headerCheckboxable]="false"
    [checkboxable]="false"
  >
  </ngx-datatable-column>
  <ngx-datatable-column
    [resizeable]="false"
    [draggable]="false"
    [sortable]="false"
    name="姓名"
    prop="name"
  >
    <ng-template let-row="row" ngx-datatable-cell-template>
      <span title="{{row.name}}">{{row.name}}</span>
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>
<hr />
<nopage-datatable-footer
  #footer
  [page]="page"
  [currentNumber]="currentNumber"
  [totalNumber]="totalNumber"
  [sizeList]="sizeList"
  (getTotal)="getTotal()"
>
</nopage-datatable-footer>

Properties

page - [?Page]

Initialize the paging condition information

currentNumber - [number]

current pageSize

totalNumber - [number]

total number

sizeList - [?array[number]]

pageSize menu

disabledAll - [?boolean]

disabled menuSize and pre/next button

debounceDueTime - [number]

debounce delay time milliSecond

checkTurnPage - [Function]

a function return boolean which check can turn page

saveState - [boolean]

true save query condition else not

Outputs

getTotal - [getTotal()]

get total number from sever

More details

look at src -> app