Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use 2 pagination for single table in angular material table?

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.

like image 515
imjayabal Avatar asked Mar 02 '19 12:03

imjayabal


People also ask

How is angular material pagination used?

It has a few properties that can be used to implement pagination; let' get started to see below; pageSizeOptions: number[]: This will display all the page size options to the user; it is an array of age size. pageSize: number: This will decide how much data will be displayed on each page; the default is 50.

What is Paginator angular?

The paginator displays a dropdown of page sizes for the user to choose from. The options for this dropdown can be set via pageSizeOptions. The current pageSize will always appear in the dropdown, even if it is not included in pageSizeOptions.

Which can be used in mat table for pagination?

Pagination. To paginate the table's data, add a <mat-paginator> after the table. If you are using the MatTableDataSource for your table's data source, simply provide the MatPaginator to your data source.


1 Answers

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.

like image 105
Samuel Philipp Avatar answered Sep 28 '22 09:09

Samuel Philipp