如何将 angular material table 列拆分为多个页面（分页）

Question

我有一个 material table 具有动态列数。

假设要显示 20 列数据。

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

如何使用 Angular material table 和分页来实现？

Answer 1

我认为此处 angular material demo 中的演示将满足您的要求。

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

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

Answer 2

分页器本身会为您提供从 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 的 displayedColums 赋值，见

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

在 stackblitz

如何将 angular material table 列拆分为多个页面（分页）

How to split angular material table columns in to multiple pages (pagination)

angular-material

angular

angular-material-table