CODEWITHSUNDEEP
angulartypescriptpagination
Shubhank Gupta
Shubhank Gupta

Reputation: 825

Multiple paginators on same table

I am using pagination on my table developed using angular material. I did pagination on table using mat-paginator desribed here: https://material.angular.io/components/paginator/overview

It's working fine on my table with one paginator.

my_app.ts

import { Component, ChangeDetectorRef, ViewChild, Input, OnChanges} from '@angular/core';
import {MatPaginator, MatTableDataSource} from '@angular/material';
@ViewChild(MatPaginator) paginator: MatPaginator;

this.dataSource.data = this.tableData; // Assigning table data to datasource
this.dataSource.paginator = this.paginator;

my_app.html

<table mat-table [dataSource]="dataSource" *ngIf="tableData.length > 0">

//Column definitions

</table>
<mat-paginator [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons></mat-paginator> <!-- Pagination of table using mat-paginator. -->

if i do something like this.

my_app.html

 <mat-paginator [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons></mat-paginator> <!-- Pagination of table using mat-paginator. -->
<table mat-table [dataSource]="dataSource" *ngIf="tableData.length > 0">

//Column definitions

</table>

<mat-paginator [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons></mat-paginator> <!-- Pagination of table using mat-paginator. -->

Only first pagination works and second pagination doesn't work on same table.

Paginator above table looks like this.

Paginator above the table Paginator below table look like this.

Paginator below the table

As you can see paginator above table is working fine but data source changes in below paginator and it is showing data as "0 of 0" even after having same datasource.

I want to bind both paginators to table data and with each other as well.

My target is to have both paginators work on same table. If anyone changes in terms of "pageSizeOptions" or "page numbers" both paginators must change at same time. Also, changes the table pages or row numbers on page(as expected).

Upvotes: 1

Views: 1142

Answers (1)

bsrdjan
bsrdjan

Reputation: 11

In HTML

<mat-paginator
    #paginatorTop
    [length]="dataSource.totalElements"
    [pageSize]="dataSource.pageSize"
    [pageSizeOptions]="[10, 25, 100]"
    [showFirstLastButtons]="true">
</mat-paginator>
<mat-table>...........</mat-table>
<mat-paginator
    #paginatorBottom
    [length]="dataSource.totalElements"
    [pageSize]="dataSource.pageSize"
    [pageSizeOptions]="[10, 25, 100]"
    [showFirstLastButtons]="true">
</mat-paginator>

In component TS

@ViewChild('paginatorTop') paginatorTop: MatPaginator;
@ViewChild('paginatorBottom') paginatorBottom: MatPaginator;


ngAfterViewInit() {
  this.paginatorTop.page.pipe(
    tap(() => { 
      this.loadCollection(
        this.paginatorTop.pageIndex,
        this.paginatorTop.pageSize,
        ...
        ...
        ...
      );
      this.paginatorBottom.pageIndex = this.paginatorTop.pageIndex;
      this.paginatorBottom.pageSize = this.paginatorTop.pageSize;
    })
  )
  .subscribe();

  this.paginatorBottom.page.pipe(
    tap(() => { 
      this.loadCollection(
        this.paginatorBottom.pageIndex,
        this.paginatorBottom.pageSize,
        ...
        ...
        ...
      );
      this.paginatorTop.pageIndex = this.paginatorBottom.pageIndex;
      this.paginatorTop.pageSize = this.paginatorBottom.pageSize;
    })
  )
  .subscribe();
}

Upvotes: 1

Related Questions