Angular material 不同 table 库的分页

Question

所以，我正在为我的 table 使用这个不同的 table 库并创建了一个自定义分页器。我想在 table 中使用这个 paginator-goto。我如何使用 table 的分页器来工作。 table 是自定义 table 库，因此我不确定如何将数据源与分页一起使用。当我点击下一个或上一个时，我只需要分页来响应。这是分页演示。 https://stackblitz.com/edit/mat-paginator-with-goto-5fxwvm?file=src/app/mat-paginator-goto/mat-paginator-goto.component.html

Answer 1

要更改<和>的“标签”，docs（参见国际化示例）指示如何更改“工具提示”

添加 MyCustomPaginatorIntl

export class MyCustomPaginatorIntl implements MatPaginatorIntl {
  changes = new Subject<void>();

  firstPageLabel = "First page"
  itemsPerPageLabel = "Items per page:"
  lastPageLabel = "Last page:"

  nextPageLabel = "Next";
  previousPageLabel = "Previous";
  getRangeLabel(page: number, pageSize: number, length: number): string {
    if (length === 0) {
      return "Page 1 of 1";
    }
    const amountPages = Math.ceil(length / pageSize);
    return `Page ${page + 1} of ${amountPages}`;
  }
}

并用作提供者 - 您可以在 app.module 或您的组件中执行此操作

providers:[{provide:MatPaginatorIntl,useClass:MyCustomPaginatorIntl}],

但是如果我们想更改“<”和“>”，我们需要使用 class

我们可以在 styles.css 中写入 - 如果我们不为所有应用程序使用样式，则不起作用

.mat-paginator-navigation-next .mat-button-wrapper,
.mat-paginator-navigation-previous .mat-button-wrapper
{
  color:transparent!important;
}
.mat-paginator-navigation-previous
{
  width:5em!important;;
}
.mat-paginator-navigation-next::after{
  content:attr(aria-label);
  margin-left:-2em;
}
.mat-paginator-navigation-previous::after{
  content:attr(aria-label);
  margin-left:-2em;
}

在 stackblitz 中有一个使用 ashraful Islam 的自定义分页器的例子

更新当我们更改数据源时，我们需要“手动更新”分页器。好吧，这与另一个没有什么不同。我们可以使用 ViewChild 来获取 MatPaginatorGotoComponent

  @ViewChild(MatPaginatorGotoComponent) paginator

而且，当我们更改我们可以使用的数据时，例如

this.paginator.pageIndex=0;
this.paginator.goTo=1

或

if (this.paginator.pageIndex*this.paginator.pageSize>this.data.length)
{
    const pageIndex=Math.ceil(this.data.length / this.paginator.pageSize)-1
    this.paginator.pageIndex=pageIndex
    this.paginator.goTo=pageIndex+1
}

Angular material 不同 table 库的分页

Angular material pagination with different table library

html

angular

angular-material

pagination