制作Angular的分页功能,采用Angular Material的Paginator组件,官方文档略晦涩,坑不少,费了不少功夫完成了,整理如下:
1.分页功能
HTML:
<mat-paginator [length]="length"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(page)="onPageChange($event)" style="width: 100%;">
</mat-paginator>
TS:
//分页
length=0;
pageSize = 5;
page = 0;
pageSizeOptions: number[] = [5, 10, 25, 100];
//当前页变化时执行
onPageChange(pageEvent: PageEvent){
this.page = pageEvent.pageIndex; //设置当前页
this.pageSize = pageEvent.pageSize; //设置一页记录数
this.getDevice(); //查询数据
}
//查询
getDevice() {
let filter={
'page':this.page,
'size':this.pageSize
};
this.deviceService.getDevice(filter).subscribe(
(data:any)=>{
this.devices = data.content;
this.length = data.totalElements;
}
);
}
效果1:每页5条记录
效果2:每页10条记录
分页功能制作完成。
2. 分页标签的中文显示
Angular Material 默认的Paginator是英文的,现在要把它改成中文显示,网上找了几个方案,没有特别简单的,都需要另外加一个类实现,直接抄过来的也都有一些报错,无法运行。
仔细看了一下官方文档,再结合Github上找到的例子,搞定了。
根据官方文档的说法,如果要改变文字显示,要增加一个MatPaginatorIntl的新实例,作为provider使用。
本地化显示的类:paginator.translate.ts, 注意:@Injectable()必须声明,不然总有奇怪的报错。
import { Injectable } from "@angular/core";
import { MatPaginatorIntl } from "@angular/material/paginator";
@Injectable() //必须有
export class MatPaginatorIntlCN extends MatPaginatorIntl { //起名为MatPaginatorIntlCN,针对中文
itemsPerPageLabel = '每页数量';
nextPageLabel = '下一页';
previousPageLabel = '上一页';
firstPageLabel = '首页';
lastPageLabel = '尾页';
getRangeLabel = function (page:number, pageSize:number, length:number) {
if (length === 0 || pageSize === 0) {
return '0 到 ' + length;
}
length = Math.max(length, 0);
const startIndex = page * pageSize;
const endIndex = startIndex < length ?
Math.min(startIndex + pageSize, length) :
startIndex + pageSize;
return startIndex + 1 + ' - ' + endIndex + ' / ' + length;
};
}
app.module.ts
import { MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
import { MatPaginatorIntlCN } from '../app/common/paginator.translate'
...
imports: [
...
MatPaginatorModule
],
providers: [ //注意:用useClass
{ provide: MatPaginatorIntl, useClass: MatPaginatorIntlCN }
],
效果:
参考:
https://stackoverflow.com/questions/45278805/md-paginator-how-i-can-get-the-next-or-prev-click-event
https://github.com/angular/components/issues/8239
https://material.angular.io/components/paginator/api
https://github.com/eduardomq/MatPaginatorIntlEsp/blob/master/mat-paginator-intl-esp.service.ts