Question

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

目前我有以下代码：

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

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

Answer 1

我在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 2

在您的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;
  }

可能会有所帮助。

Answer 3

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

this.paginator.pageIndex = pageNumber;

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

Working_Example

为角度分页添加“转到页面”功能

3 个答案: