如何将角度材料表列拆分为多个页面（分页）答案

【问题标题】：How to split angular material table columns in to multiple pages (pagination)如何将角度材料表列拆分为多个页面（分页）
【发布时间】：2020-06-15 07:43:14
【问题描述】：

我有一个动态列数的材料表。

假设要显示 20 列数据。

对于每个页面，它应该显示 5 列。当用户点击分页时，它应该显示其他列。

如何使用 Angular 材质表和分页来实现这一点？

【问题讨论】：

主要是分页用来显示下一组行，为什么要在分页中显示下一组列？
如果你准备了一个 stackblitz 例子，给你建议会更容易。但是简短的版本 - 这不能用 mat-paginator 完成，因为它绑定到 DataSource 并且关心行而不是列。但它应该很容易自己处理。只需拥有allColumns 的集合并添加两个按钮，这些按钮将为您的表格更改displayedColumns 的内容。您也可以设置类似于 mat-paginator 的样式。

标签： angular angular-material angular-material-table

【解决方案1】：

分页器本身为您提供从 0 到页数的索引。您唯一需要做的就是更改 displayColumns 考虑这个索引。

如果你有，例如像

这样的分页器

<mat-paginator #paginator [length]="7" hidePageSize="true" 
           (page)="changeDisplayColumns($event)"
           [pageSize]="2">
</mat-paginator>

还有一个包含所有列的变量

displayedColumnsAll: string[] = ['position', 'name', 'weight', 
                                 'symbol',"another","another2","another3"];

看到[length]of paginator 你输入了列的数量（例如“7”）

你可以的

  changeDisplayColumns(page:PageEvent)
  {
    this.displayedColumns=this.displayedColumnsAll.slice(
          page.pageIndex*page.pageSize,
          page.pageIndex*page.pageSize+page.pageSize)
  }

查看fool stackblitz

注意：首先您需要为 index=0 的 displayColums 赋值，请参阅

displayedColumns=this.displayedColumnsAll.slice(0,2)

在堆栈闪电战中

【讨论】：

【解决方案2】：

我认为angular material demo这里的演示将符合您的要求。

它不叫分页，而是动态地叫它列。

您可以实现一个按钮名称next column page，并通过在单击时添加和删除一些列来执行操作。

【讨论】：