Paginator not working on multiple table with angular material table

问题

I have few table in my application with mat-paginator. The first table paginator(#paginatorregin) working fine.The second table paginator(#paginatorcountry) and sorting is not working but length applied on pagination table based on how much value i got from json object, here i add my code below

     <table mat-table [dataSource]="regionsDataSource" matSort>
        <ng-container matColumnDef="regions">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Regions</th>
        <td mat-cell *matCellDef="let element"> {{element.regions}} </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="regionsColumn"></tr>
        <tr mat-row *matRowDef="let row; columns: regionsColumn;"></tr>
        </table>
        <mat-paginator #paginatorregin [length]="regionsDataSource.length" [pageSize]="3" [pageIndex]="0" [pageSizeOptions]="[3,5,10]"showFirstLastButtons></mat-paginator>

         <table mat-table [dataSource]="countryDataSource" matSort>
         <ng-container matColumnDef="country">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Contry</th>
         <td mat-cell *matCellDef="let element"> {{element.name}} </td>
         </ng-container>
         <tr mat-header-row *matHeaderRowDef="countryColumn"></tr>
         <tr mat-row *matRowDef="let row; columns: countryColumn;"></tr>
         </table>
         <mat-paginator #paginatorcountry [length]="countryDataSource.length" [pageSize]="10" [pageIndex]="0"[pageSizeOptions]="[10, 20, 40]" showFirstLastButtons> </mat-paginator>
    <mat-form-field>
            <mat-select placeholder="Regions" [(ngModel)]="adminsettingvalue.reginvalue" (ngModelChange)="regionChangeItem($event)"
              name="regindropdown">
              <mat-option *ngFor="let region of regiondropdown" [value]="region.id">
                {{region.viewValue}}
              </mat-option>
            </mat-select>

        component code:       
        export interface Regions {
              regions: string;
            }

        const regionElememtData: Regions[] = [
              { regions: 'Americas' },
              { regions: 'Asia Pacific' },
              { regions: 'Europe' },
              { regions: 'Middle East' },
              { regions: 'Africa' }
            ];
        const countryDataSource = [];

        @ViewChild('paginatorregin') paginator: MatPaginator;
        @ViewChild('paginatorcountry') paginatorcountry: MatPaginator; @ViewChild(MatSort) sort: MatSort;

        regionsColumn: string[] = ['regions'];
        countryColumn: string[] = ['country'];

        regionsDataSource = new MatTableDataSource<Regions>(regionElememtData);
        countryDataSources = new MatTableDataSource(countryDataSource);

        ngOnInit() {
                this.regionsDataSource.paginator = this.paginator;
                this.regionsDataSource.sort = this.sort;
             }
         ngAfterViewInit() {
                this.countryDataSource.paginator = this.paginatorcountry;
                this.countryDataSource.sort = this.sort;
             }

listOfCounty: any = [];
countryDataSources = new MatTableDataSource(); 
 regionChangeItem(eventvalue) {

    if (eventvalue == 1) {
      this.commonservice.getAmericaList().subscribe(americavalue => {
        this.listOfCounty= americavalue;
      })
    }
  this.countryDataSources.data =  this.listOfCounty;
  }


         Here the first table working as expected with sort, pagination. Second table pagination value applied with json value length but it will display total value i add 10 data per page it's working the #paginatorcounty table.

回答1:

You can try by using two matSort selectors for two different table like:

HTML Code:

// For table 1
<table mat-table [dataSource]="regionsDataSource" #t1Sort="matSort" matSort>
  // Tr and other table related content
</table>

// For table 2
<table mat-table [dataSource]="countryDataSource"  #t2Sort="matSort" matSort>
  // Tr and other table related content
</table>

In TS:

@ViewChild('paginatorregin') paginator: MatPaginator;
@ViewChild('paginatorcountry') paginatorcountry: MatPaginator;

@ViewChild('t1Sort') t1Sort: MatSort;  // use two diff. sort for two table
@ViewChild('t2Sort') t2Sort: MatSort;

regionsColumn: string[] = ['regions'];
countryColumn: string[] = ['country'];

regionsDataSource = new MatTableDataSource<Regions>(regionElememtData);
countryDataSource = new MatTableDataSource<Country>(countryElememtData);

constructor() {}

ngOnInit() {
     this.regionsDataSource.paginator = this.paginator;
     this.regionsDataSource.sort = this.t1Sort;
     this.countryDataSource.paginator = this.paginatorcountry;
     this.countryDataSource.sort = this.t2Sort;
}

EDIT:

if (eventvalue == 1) {
      this.commonservice.getAmericaList().subscribe(americavalue => {
        this.listOfCounty= americavalue;
        this.countryDataSources.data =  this.listOfCounty;

        this.countryDataSource.paginator = this.paginatorcountry; // Add these two lines here
        this.countryDataSource.sort = this.t2Sort;
    })
}

WORKING DEMO

来源：https://stackoverflow.com/questions/53954062/paginator-not-working-on-multiple-table-with-angular-material-table