[](https://travis-ci.org/ZhongruiGroup/ngx-datatable-footer) [](ht
npm install ngx-datatable-footer
This is a footer component for extending'ngx-datatable'components.
Install through npm:
``
npm install --save ngx-datatable-footer
Then include in your apps module:
`typescript
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:
`typescript
import { Component } from '@angular/core';
@Component({
template: '
})
export class MyComponent {}
`
目前只支持全局修改页脚左侧
添加一个模板组件footer-page-statics
`html
let-rowCount="rowCount"
let-pageSize="pageSize"
let-selectedCount="selectedCount"
let-curPage="curPage"
let-offset="offset"
let-config="config"
>
*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
"
>
typescript
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;
constructor() {}
ngOnInit() {}
}
`在模块引用的地方
typescript
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 中
$3
在使用的地方，如下示例，可以完全替换页脚
html
let-rowCount="rowCount"
let-pageSize="pageSize"
let-selectedCount="selectedCount"
let-curPage="curPage"
let-offset="offset"
>
Summary
: Gender: Female
Rows: {{ rowCount }} | Size: {{ pageSize }} | Current: {{ curPage }} | Offset: {{ offset }}
`$3
| 变量 | 说明 |
| ------------- | ----------------------------------------------------------------------------- |
| rowCount | 总行数 |
| pageSize | 每页数量 |
| selectedCount | 已选择数量 |
| curPage | 当前页数 |
| offset | 页偏移量 |
| config | 配置信息