8

I am creating an application in angular6 with angular material. How to use 2 pagination in a single table. enter image description here I want to show pagination both places Header and Footer.

The header pagination only shows the "Items per page" with drop-down. The footer pagination will show arrow and all.

When I add 2 pagination the second one is not working.

Please refer screenshots enter image description here

Thanks.

Samuel Philipp
  • 10,631
  • 12
  • 36
  • 56
imjayabal
  • 805
  • 1
  • 12
  • 24

1 Answers1

10

I don't think there is an official solution for that at the moment and you have to synchronize the both paginators yourself.

Configure the first paginator as you like and add all the input params to the second one:

<mat-paginator #paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

<table mat-table [dataSource]="dataSource"> <!-- ... --> </table>

<mat-paginator (page)="syncPrimaryPaginator($event)" 
  [pageSize]="paginator.pageSize" [pageIndex]="paginator.pageIndex"
  [length]="paginator.length" [pageSizeOptions]="paginator.pageSizeOptions"></mat-paginator>

In your component add a method to sync the first paginator, if the second is used:

dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);

@ViewChild(MatPaginator) paginator: MatPaginator;

ngOnInit() {
  this.dataSource.paginator = this.paginator;
}

syncPrimaryPaginator(event: PageEvent) {
  this.paginator.pageIndex = event.pageIndex;
  this.paginator.pageSize = event.pageSize;
  this.paginator.page.emit(event);
}

I forked this official example and updated it to reproduce your problem. Here is my solution.

Samuel Philipp
  • 10,631
  • 12
  • 36
  • 56
  • Thank you, Samuel P. It's working for me. One more help can I show the page numbers like bootstrap pagination instead of an arrow – imjayabal Mar 05 '19 at 10:28
  • Officially there is no option to achieve that ([docs](https://material.angular.io/components/paginator/api)). Maybe you can create your own paginator from the angular source. – Samuel Philipp Mar 05 '19 at 10:31
  • This worked for me! I had to make a few modifications though. I needed to add a nullish coalescing operator to each of the paginator properties in template (paginator?.pageIndex etc). That by itself got me the right functionality but then I had an error regarding values being changed after check so I also had to add a ChangeDetectorRef.detectChanges() in AfterViewInit lifecycle. – Qamar Stationwala Apr 19 '23 at 22:22