在angular中为材料分页添加‘转到页面’功能

Question

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

目前，我有以下代码：

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

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

Answer 1

我找到一段来自here的代码，它对我来说工作得很好：

this.paginator.pageIndex = pageNumber;

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

Working_Example

Answer 2

我已经在mat-paginator上创建了一个mat-paginator-goto组件，这与原始mat-paginator的工作方式相同，但也具有转到/跳转到特定页面的选项。

goTo的可用页面列表是根据length和pageSize计算得出的。

要集成到您的angular/material项目中，请执行以下步骤

第一步：转到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;
  }

也许这会有所帮助。