Angular9：这两种分页实现有什么区别？

Question

我是 angular 的新手，我尝试创建一个带有分页的 table，来自服务器的数据 returns，所以我不想把所有数据都带进来在一起（因为我可能有几千行以上），所以你更喜欢哪种类型的分页好？我发现了这两个实现：第一：

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

第二个：

<mat-paginator [length]="length"
               [pageSize]="pageSize"
               [pageSizeOptions]="pageSizeOptions"
               (page)="pageEvent = $event">
</mat-paginator>

我觉得第二种更好，但我不知道怎么用。请帮助我并告诉我如何仅当我更改分页器时才能从服务器获取数据，例如在开始时它只给我带来 5 行当我转到下一页时它从服务器给我带来另外 5 行。

如果可以，请给我一个简单的例子或一个link解释得尽可能容易理解。

Answer 1

您在 table 数据源中的实现在这里很重要。你可以使用这个分页

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

如果你想在改变pagesize时获取数据，你可以定义如下代码。

pageIndex: number; pageSize: number;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: false }) sort: MatSort;
@ViewChild(MatTable, { static: false }) table: MatTable<any>;

ngAfterViewInit() {
    setTimeout(() => {
      this.pageIndex = this.paginator.pageIndex;
      this.pageSize = this.paginator.pageSize;
      this.paginator.page.subscribe(res => {
        this.pageIndex = res.pageIndex;
        this.pageSize = res.pageSize;
        this.getTransactions();
      });
      
      this.getTransactions();
    });
  }

 getTransactions() {
      //  Here you can get the data
      this.dataSource.getData(this.pageIndex.toString(), this.pageSize.toString()); 
      this.paginator.length = this.dataSource.dataLength;
    }

参考文献：

https://medium.com/javascript-in-plain-english/implementing-angular-material-table-with-pagination-server-side-filtering-and-sorting-58e6a2ba4a48

Angular9：这两种分页实现有什么区别？

Angular 9: what is the difference between these two pagination implementation?

javascript

datatable

pagination

angular

angular-material-table