angular - 如何在角材料表中对单个表使用 2 分页?
问题描述
我正在使用角材料在 angular6 中创建一个应用程序。如何在单个表格中使用 2 个分页。 我想在页眉和页脚处显示分页。
标题分页仅显示带有下拉菜单的“每页项目”。页脚分页将显示箭头和所有内容。
当我添加 2 个分页时,第二个不工作。
谢谢。
解决方案
我认为目前没有官方解决方案,您必须自己同步两个分页器。
根据需要配置第一个分页器,并将所有输入参数添加到第二个:
<mat-paginator #paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
<table mat-table [dataSource]="dataSource"> <!-- ... --> </table>
<mat-paginator (page)="syncPrimaryPaginator($event)"
[pageSize]="paginator.pageSize" [pageIndex]="paginator.pageIndex"
[length]="paginator.length" [pageSizeOptions]="paginator.pageSizeOptions"></mat-paginator>
如果使用了第二个分页器,请在您的组件中添加一个同步第一个分页器的方法:
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
@ViewChild(MatPaginator) paginator: MatPaginator;
ngOnInit() {
this.dataSource.paginator = this.paginator;
}
syncPrimaryPaginator(event: PageEvent) {
this.paginator.pageIndex = event.pageIndex;
this.paginator.pageSize = event.pageSize;
this.paginator.page.emit(event);
}
推荐阅读
- ios - 如何自定义 iOS UISlider 渐变轨道高度和透明度
- javascript - 错误:webpack.optimize.CommonsChunkPlugin 已被移除,请改用 config.optimization.splitChunks
- java - FTPSClient,为远程和本地提供什么值
- android - MQTT Android 一直处于 Reconnecting 状态
- angular - 当在 FormControlName 上调用 disabled() 使整个表单无效时如何解决?
- visual-studio-2017 - Visual Studio 中的消息“计划安装此扩展”
- ios - 可能导致 iOS 在请求位置授权时显示警报的可能原因是什么?
- javascript - 如何从对象数组中提取单个对象的值
- generator - jhipster - 仅创建前端
- c# - 启动时 WCF IIS 托管服务缓慢