ngx datatable footer

About

This is a footer component for extending'ngx-datatable'components.

Installation

Install through npm:

npm install --save ngx-datatable-footer

Then include in your apps module:

import { NgModule } from '@angular/core';
import { NgxDatatableFooterModule } from 'ngx-datatable-footer';

@NgModule({
  imports: [NgxDatatableFooterModule.forRoot()],
})
export class MyModule {}

Finally use in one of your apps components:

import { Component } from '@angular/core';

@Component({
  template: '<app-datatable-footer [datatable]="datatable"></app-datatable-footer>',
})
export class MyComponent {}

自定义模板

自定义页脚左侧

目前只支持全局修改页脚左侧 添加一个模板组件footer-page-statics

<ng-template
  #template
  let-rowCount="rowCount"
  let-pageSize="pageSize"
  let-selectedCount="selectedCount"
  let-curPage="curPage"
  let-offset="offset"
  let-config="config"
>
  <div
    class="page-count"
    *ngIf="rowCount > 0"
    [innerHTML]="
      '总数量' +
      rowCount +
      ' ' +
      config.labels.current +
      ((offset || 0) * pageSize + 1) +
      ' - ' +
      ((offset + 1) * pageSize > rowCount ? rowCount : (offset + 1 || 1) * pageSize) +
      ' / ' +
      rowCount +
      config.labels.line
    "
  ></div>
</ng-template>

import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { NgxDatatableFooterPageStatics } from 'ngx-datatable-footer/src/lib/models/footer.type';

@Component({
  selector: 'app-footer-page-statics',
  templateUrl: './footer-page-statics.component.html',
  styleUrls: ['./footer-page-statics.component.scss'],
})
export class FooterPageStaticsComponent implements OnInit, NgxDatatableFooterPageStatics {
  @ViewChild('template') templateRef: TemplateRef<any>;
  constructor() {}

  ngOnInit() {}
}

在模块引用的地方

import { NgModule } from '@angular/core';
import { NgxDatatableFooterModule } from 'ngx-datatable-footer';

@NgModule({
  declarations: [FooterPageStaticsComponent],
  imports: [
    NgxDatatableFooterModule.forRoot({{ pageStatics: FooterPageStaticsComponent }})
  ]
  ...
  entryComponents: [FooterPageStaticsComponent],
})
export class MyModule {}

需要把 FooterPageStaticsComponent 添加到 entryComponents 中

完全自定义

在使用的地方，如下示例，可以完全替换页脚

<ngx-datatable-footer [datatable]="datatable">
  <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>

变量定义

| 变量 | 说明 | | ------------- | ----------------------------------------------------------------------------- | | rowCount | 总行数 | | pageSize | 每页数量 | | selectedCount | 已选择数量 | | curPage | 当前页数 | | offset | 页偏移量 | | config | 配置信息 labels={ current: '当前 ',line: '行',page: '页',jumpTo: '跳转到',} |