I am creating an application in angular6 with angular material. How to use 2 pagination in a single table. 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
Thanks.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With