[英]mat-paginator does not show page info
Material paginator does not show page info.材料分页器不显示页面信息。
In official documentation, there is page info : 'Page 1 of 20' but when I run their own code locally, or in Stackblitz there is different output.在官方文档中,有页面信息:'Page 1 of 20' 但是当我在本地运行他们自己的代码时,或者在 Stackblitz 中会出现不同的输出。
It shows number of items : '1-10 of 100'它显示项目数:'1-10 of 100'
I am running same version as documentation我正在运行与文档相同的版本
Is this bug , or did I messed up some property setup?是这个错误,还是我搞砸了一些属性设置?
See images:见图片:
There is a property called getRangeLabel available for MatPaginator. MatPaginator 有一个名为getRangeLabel的属性。 You can use it to change the label as you want.
您可以根据需要使用它来更改标签。
In your component, set up your paginator:在您的组件中,设置您的分页器:
@ViewChild(MatPaginator, {static : false}) paginator!: MatPaginator;
Then assign a custom function in the afterViewInit:然后在 afterViewInit 中分配一个自定义函数:
ngAfterViewInit() {
this.paginator._intl.itemsPerPageLabel = 'Your custom text';
}
------------------------ OR ------------------------ ------------------------或------------
ngAfterViewInit() {
this.paginator._intl.getRangeLabel = this.getRangeDisplayText;
}
Then set up a custom function to display the text you need:然后设置一个自定义函数来显示你需要的文本:
getRangeDisplayText = (page: number, pageSize: number, length: number) => {
const initialText = `Displaying users`; // customize this line
if (length == 0 || pageSize == 0) {
return `${initialText} 0 of ${length}`;
}
length = Math.max(length, 0);
const startIndex = page * pageSize;
const endIndex = startIndex < length
? Math.min(startIndex + pageSize, length)
: startIndex + pageSize;
return `${initialText} ${startIndex + 1} to ${endIndex} of ${length}`; // customize this line
};
This will use whatever pageSize and length you have in your HTML or have configured in your component.这将使用您在 HTML 中或在组件中配置的任何 pageSize 和长度。
<mat-paginator [length]="dataSource.total"
[pageSize]="10"
hidePageSize
showFirstLastButtons>
If your data returns 50 records, this will show this text:如果您的数据返回 50 条记录,则会显示以下文本:
Displaying users 1 to 10 of 50显示用户 1 到 10,共 50 个
one possible fix that I came up with is add custom element我想出的一种可能的解决方法是添加自定义元素
ngAfterViewInit(): void {
// get mat sub component
const list = this.customPagingItems.nativeElement.getElementsByClassName("mat-paginator-range-actions");
if (!!list[0]) {
// add page info element
const div = this.renderer.createElement("div");
this.renderer.addClass(div, "mat-paginator-page-info");
list[0].appendChild(div);
}
}
ngAfterViewChecked() {
// update page info because mat-paginator is missing that
const list = this.customPagingItems.nativeElement.getElementsByClassName("mat-paginator-page-info");
if (!!list[0]) list[0].innerHTML = `Page ${this.currentPage.toString()} of ${this.totalPages.toString()}`;
}
order of elements is done in CSS by adding order
property since it is display:flex (no need of directive overkill)元素的顺序是通过添加
order
属性在 CSS 中完成的,因为它是 display:flex (不需要指令矫枉过正)
It is possible to change the 'getRangeDisplayText' method globally.可以全局更改“getRangeDisplayText”方法。 For example:
例如:
@Injectable()
export class PaginatorIntl extends MatPaginatorIntl {
constructor(private translateService: TranslateService) {
super();
}
public getRangeLabel = (page: number, pageSize: number, length: number) => {
return `${this.translateService.translate('Page')} ${page + 1} ${this.translateService.translate('of')} ${Math.ceil(length / pageSize)}`;
};
}
and provide it in AppModule (or another one):并在 AppModule(或另一个)中提供它:
@NgModule({
// ...
providers: [
{ provide: MatPaginatorIntl, useClass: PaginatorIntl },
// ...
],
// ...
})
export class AppModule {}
Also, you can provide it in unique components, if this change is not required globally:此外,如果全局不需要此更改,您可以在独特的组件中提供它:
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss'],
providers: [
{ provide: MatPaginatorIntl, useClass: PaginatorIntl },
],
})
export class TableComponent {}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.