同一表上的多个分页器
同一表上的多个分页器
提问于 2019-04-08 17:53:50
我在使用angular材质开发的表格上使用分页。我使用mat-paginator对表进行了分页，如下所示：https://material.angular.io/components/paginator/overview
它在我的表上使用一个分页器就可以很好地工作。
my_app.ts
import { Component, ChangeDetectorRef, ViewChild, Input, OnChanges} from '@angular/core';
import {MatPaginator, MatTableDataSource} from '@angular/material';
@ViewChild(MatPaginator) paginator: MatPaginator;
this.dataSource.data = this.tableData; // Assigning table data to datasource
this.dataSource.paginator = this.paginator;my_app.html
<table mat-table [dataSource]="dataSource" *ngIf="tableData.length > 0">
//Column definitions
</table>
<mat-paginator [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons></mat-paginator> <!-- Pagination of table using mat-paginator. -->如果我做这样的事。
my_app.html
<mat-paginator [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons></mat-paginator> <!-- Pagination of table using mat-paginator. -->
<table mat-table [dataSource]="dataSource" *ngIf="tableData.length > 0">
//Column definitions
</table>
<mat-paginator [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons></mat-paginator> <!-- Pagination of table using mat-paginator. -->只有第一个分页可以工作，第二个分页不能在同一个表上工作。
表格上面的分页器看起来像这样。
表格下面的分页器看起来像这样。
正如你所看到的，上面的分页器工作正常，但是数据源在下面的分页器中发生了变化，即使在拥有相同的数据源之后，它也会将数据显示为"0 / 0“。
我希望将这两个分页器绑定到表数据，也可以相互绑定。
我的目标是让两个分页器在同一个表上工作。如果有人更改了"pageSizeOptions“或”页码“，两个分页器都必须同时更改。此外，还会更改页面上的表格页面或行号(如预期)。
回答 1
Stack Overflow用户
发布于 2019-05-11 23:28:52
在HTML中
<mat-paginator
#paginatorTop
[length]="dataSource.totalElements"
[pageSize]="dataSource.pageSize"
[pageSizeOptions]="[10, 25, 100]"
[showFirstLastButtons]="true">
</mat-paginator>
<mat-table>...........</mat-table>
<mat-paginator
#paginatorBottom
[length]="dataSource.totalElements"
[pageSize]="dataSource.pageSize"
[pageSizeOptions]="[10, 25, 100]"
[showFirstLastButtons]="true">
</mat-paginator>在组件TS中
@ViewChild('paginatorTop') paginatorTop: MatPaginator;
@ViewChild('paginatorBottom') paginatorBottom: MatPaginator;
ngAfterViewInit() {
this.paginatorTop.page.pipe(
tap(() => {
this.loadCollection(
this.paginatorTop.pageIndex,
this.paginatorTop.pageSize,
...
...
...
);
this.paginatorBottom.pageIndex = this.paginatorTop.pageIndex;
this.paginatorBottom.pageSize = this.paginatorTop.pageSize;
})
)
.subscribe();
this.paginatorBottom.page.pipe(
tap(() => {
this.loadCollection(
this.paginatorBottom.pageIndex,
this.paginatorBottom.pageSize,
...
...
...
);
this.paginatorTop.pageIndex = this.paginatorBottom.pageIndex;
this.paginatorTop.pageSize = this.paginatorBottom.pageSize;
})
)
.subscribe();
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55570713
复制相关文章
相似问题
腾讯云开发者
