将“转到页面”功能添加到有角度的材料分页

Question

我需要为材料分页添加“跳转到”功能。它没有内置的方法，所以我需要手动添加它。

目前我有这个代码：

<mat-paginator [length]="pageLength"
                       [pageSize]="10"
                       [pageSizeOptions]="pageLength | checkPageLength"
                       [showFirstLastButtons]="true">
        </mat-paginator>

它显示：我当前的分页，我需要它有一个文本框和一个用于跳转到特定页面的“转到”按钮，因为我有很多页面。

Answer 1

我从这里找到了一段对我来说很好用的代码：

this.paginator.pageIndex = pageNumber;

this.paginator.page.next({      
     pageIndex: pageNumber,
     pageSize: this.paginator.pageSize,
     length: this.paginator.length
});

Working_Example

Answer 2

我已经创建了一个mat-paginator-goto组件mat-paginator，它的工作原理与原始组件相同，mat-paginator但还有goTo/jumpTo特定页面的选项。

goTo的可用页面列表是基于length和计算的pageSize。

要集成到您的angular/material项目中，请按照以下步骤操作

第 1 步：转到mat-paginator-with-goto (Stackblitz)

第 2 步：复制文件夹（mat-paginator-goto）并粘贴到您的项目中

第 3 步：导入您的module

import { MatPaginatorGotoComponent } from './mat-paginator-goto/mat-paginator-goto.component';

@NgModule({
  declarations: [ ...MatPaginatorGotoComponent ],
})

第 4 步：使用与原始相同mat-paginator

<mat-paginator-goto [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"
        (page)="paginationChange($event)"></mat-paginator-goto>

注意：相应地更新导入路径和样式

注意：如果总页数很大，您可能会遇到应用程序冻结问题，我最终替换mat select为mat input

Answer 3

在你的 html 文件中

<mat-form-field>
   <input matInput [(ngModel)]="goToPage">
</mat-form-field>
<button (click)="updateGoToPage()">Go</button>

在你的 ts 文件中

@ViewChild(MatPaginator) paginator: MatPaginator;

goToPage = null;
updateGoToPage() {

    this.paginator.pageIndex = this.goToPage - 1;
  }

也许这会有所帮助。