Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular mat-table pagination not working, entire data is loaded on First page of mat-table

I have use Angular Material table, i have bind data source from ts file,but all the data is loaded on very first page, pagination is not working.I have two more table, which are on same page,same problem for other tables too.

I have tried

setTimeout(() => this.dataSource.paginator = this.paginator);

and

ngAfterViewInit() {
   this.dataSource.paginator = this.paginator
}

HTML:

    <mat-table class="mt-4 table-container" fxFlex="100" [dataSource]="allUsers">
      <ng-container matColumnDef="checked">
        <mat-header-cell fxFlex="10" (click)="selectAllUsers()" *matHeaderCellDef>
          <mat-checkbox [(ngModel)]="checkedAllUsers"></mat-checkbox>
        </mat-header-cell>
        <mat-cell fxFlex="10" *matCellDef="let element">
          <mat-checkbox [(ngModel)]="element.checked"></mat-checkbox>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="firstName">
        <mat-header-cell fxFlex="25" *matHeaderCellDef> First Name </mat-header-cell>
        <mat-cell fxFlex="25" *matCellDef="let element"> {{element.firstName}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="lastName">
        <mat-header-cell fxFlex="25" *matHeaderCellDef> Last Name </mat-header-cell>
        <mat-cell fxFlex="25" *matCellDef="let element"> {{element.lastName}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="email">
        <mat-header-cell fxFlex="30" *matHeaderCellDef> Email </mat-header-cell>
        <mat-cell fxFlex="30" *matCellDef="let element"> {{element.email}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="actions">
        <mat-header-cell fxFlex="10" *matHeaderCellDef> Action </mat-header-cell>
        <mat-cell fxFlex="10" *matCellDef="let row; let i=index;">
          <button mat-icon-button class="viewButton" (click)="view(i, row.id, row.title, row.state, row.url, row.created_at, row.updated_at)">
            <mat-icon aria-label="Delete">remove_red_eye</mat-icon>
          </button>
        </mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="allUsersColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: allUsersColumns;"></mat-row>
    </mat-table>
    <mat-paginator #allUsersPaginatorr [pageSizeOptions]="[10,20,30]" showFirstLastButtons></mat-paginator>

TS Code:

 @ViewChild(MatPaginator) paginator: MatPaginator;

 allUsersColumns: string[] = ['checked', 'firstName', 'lastName', 'email', 
'actions'];
allUsersDataSource = new MatTableDataSource<any>();
 allUsers: any[] = [
{ checked: false, firstName: 'Debi', lastName: 'Austin', email: 
 '[email protected]' },
  { checked: false, firstName: 'Jimmy', lastName: 'Williams', email: 
 '[email protected]' },
  { checked: false, firstName: 'Randy', lastName: 'Waif', email: 
 '[email protected]' },
  { checked: true, firstName: 'Chad', lastName: 'Spongla', email: 
   '[email protected]' },
   { checked: false, firstName: 'Debi', lastName: 'Austin', email: 
  '[email protected]' },
  { checked: false, firstName: 'Jimmy', lastName: 'Williams', email: 
  '[email protected]' },
  { checked: false, firstName: 'Randy', lastName: 'Waif', email: 
  '[email protected]' },
  { checked: false, firstName: 'Chad', lastName: 'Spongla', email: 
 '[email protected]' },
  { checked: false, firstName: 'Debi', lastName: 'Austin', email: 
 '[email protected]' },
    { checked: true, firstName: 'Jimmy', lastName: 'Williams', email: 
 '[email protected]' },
  { checked: false, firstName: 'Chad', lastName: 'Spongla', email: 
 '[email protected]' },
  { checked: false, firstName: 'Debi', lastName: 'Austin', email: 
 '[email protected]' },
  { checked: true, firstName: 'Jimmy', lastName: 'Williams', email: 
 '[email protected]' }
 ];
ngOnInit() {
 this.allUsersDataSource = new MatTableDataSource(this.allUsers);
  this.allUsersDataSource.paginator = this.paginator;
}
like image 484
Jayant Belekar Avatar asked Feb 04 '19 13:02

Jayant Belekar


2 Answers

If your mat-paginator is inside any ngIf conditioned block as shown in the below code, then the table shows all the data in the first page itself.

<div *ngIf="isDataLoaded">
   <mat-table [dataSource]="dataSource">
      ...
      ...
   </mat-table>
   <mat-paginator
         [length]="allUsers.length"
         [pageSize]="5"
         [pageSizeOptions]="[5, 10, 20]">
   </mat-paginator>
</div>

Solution 1: Move the mat-paginator code block outside of the ngIf conditioned block as shown below:

<div *ngIf="isDataLoaded">
   <mat-table [dataSource]="dataSource">
      ...
      ...
   </mat-table>
</div>
<mat-paginator
         [length]="allUsers.length"
         [pageSize]="5"
         [pageSizeOptions]="[5, 10, 20]">
</mat-paginator>

Solution 2: Use hidden as alternative for ngIf directive as shown below:

<div [hidden]="!isDataLoaded">
   <mat-table [dataSource]="dataSource">
      ...
      ...
   </mat-table>
   <mat-paginator
         [length]="allUsers.length"
         [pageSize]="5"
         [pageSizeOptions]="[5, 10, 20]">
   </mat-paginator>
</div>

Note: And of course, following mandatory steps for initializing mat-table data and mat-paginator

this.dataSource = new MatTableDataSource(this.allUsers);
this.dataSource.paginator = this.paginator;

Happy Coding...Cheerzz

like image 115
Darshuu Avatar answered Sep 17 '22 16:09

Darshuu


You should assign your data to the this.allUsersDataSource.data. Also ngAfterViewInit is necessary to relate the paginator with the table. Change your code

ngOnInit() {
 this.allUsersDataSource = new MatTableDataSource(this.allUsers);
  this.allUsersDataSource.paginator = this.paginator;
}

with

ngOnInit() {
     this.allUsersDataSource.data = new MatTableDataSource(this.allUsers);
}
ngAfterViewInit() {
      this.allUsersDataSource.paginator = this.paginator;
}
like image 29
boyukbas Avatar answered Sep 18 '22 16:09

boyukbas