CODEWITHSUNDEEP
angularangular-material
J.Garay
J.Garay

Reputation: 111

Add 'go to page' functionality to material pagination in angular

I need to add a 'jump to' functionality to material pagination. it doesn't have built-in method for that so I need to add it manually.

at the moment I have this code:

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

and it shows: my current pagination and I need it to have a textbox and a 'go' button for jumping to a specific page since I have many pages.

Upvotes: 11

Views: 20550

Answers (3)

Sameer
Sameer

Reputation: 5188

I have created a mat-paginator-goto component over mat-paginator, this works same as original mat-paginator but also has option of goTo/jumpTo specific page.

The list of available pages for goTo have been calculated based on length and pageSize.

To Integrate in your angular/material project follow below steps

Step 1: Goto mat-paginator-with-goto (Stackblitz)

Step 2: Copy folder(mat-paginator-goto) and paste into you project

Step 3: Import in your module

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

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

Step 4: Use it same as original mat-paginator

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

Note: Update import paths and styles accordingly

Note: You may face application freezing issue if the total page count is huge, I ended up replacing mat select with mat input

Upvotes: 8

Prashant Pimpale
Prashant Pimpale

Reputation: 10697

I found a piece of code from here which is working fine for me:

this.paginator.pageIndex = pageNumber;

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

Working_Example

Upvotes: 18

Keval K.
Keval K.

Reputation: 15

In your html file

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

And in your ts file

@ViewChild(MatPaginator) paginator: MatPaginator;

goToPage = null;
updateGoToPage() {

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

May be this will help.

Upvotes: 1

Related Questions