將“轉到頁面”功能添加到有角度的材料分頁

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;
  }

可能這會有所幫助。