0

im using MatPaginator with MatTableDataSource and when I assign data to the dataSource it change the lenght i assign to the MatPaginator. So, when I load nextpage, sort or filter, dataSorce change the lenght and can't continue paginating.

My code:

  public dataSource = new MatTableDataSource<Permission>();
  pageSize!: number;
  pageIndex!: number;
  length!: number;

  @ViewChild(MatPaginator)
  paginator!: MatPaginator;

  ngAfterViewInit(): void {
    this.dataSource.paginator = this.paginator;
}
      
  handlePageEvent(event: PageEvent) {
    this.loading = true;
    this.pageSize = event.pageSize;
    this.pageIndex = event.pageIndex + 1;
    this.loadDatabase();
  }

  datab: Permission[] = [];
  loadDatabase() {
    this.permissionService
      .showAllPermissions(this.filter, this.pageSize, this.pageIndex, this.sortColumn, this.sortOrder)
      .subscribe(
        result => {

          const d = result.data as Permission[];
          d.forEach(r => {
            if (!this.datab.some(x => x.id === r.id)) {
              this.datab.push(r);
            }
          });

          this.dataSource.data = this.datab as Permission[];
          this.length = result.paginatorInfo.total;

          this.loading = false;
        });
  }
}

HTML

<table mat-table [dataSource]="dataSource" class="center" matSort (matSortChange)="sortData($event)">



<mat-paginator (page)="handlePageEvent($event)" [pageSize]=pageSize [length]="length" [pageIndex]="pageIndex-1">
</mat-paginator>

On Load:

On Load

After Next Page:

After Click Next Page

Agustin
  • 215
  • 1
  • 2
  • 14
  • the "length" (if you dont use filter) should not change. If you want an example of mat-dataTable with sort, filter, pagination and call to a service, check this link: https://stackoverflow.com/questions/63780213/connect-method-datasource-is-not-emitting-all-paginated-rows-for-mattable/63783274#63783274 – Eliseo Jul 22 '21 at 07:26
  • I know, but length change according to the length of dataSource, when I assign data to dataSource it change (5 row + 5 new row) and I can't assign length with the new value (77 if I don't use filter) – Agustin Jul 22 '21 at 13:35
  • I think that's a bug of mat-paginator cause if I see the value of length is still 77 after data is added to dataSource. If I make a button and read length it's 77, and if I reassign the value it change in the mat-paginator. It's like if I do: this.dataSource.data = this.datab as Permission[]; this.length = result.paginatorInfo.total; The length value is assigned by this.dataSource after I assign this.length – Agustin Jul 22 '21 at 20:10
  • @Austin, you can try forget put the "length" of the mat-paginator and use: `this.dataSource=new DataSource(this.datab);this.dataSourcePaginator=this.paginator` each time you make a filter – Eliseo Jul 26 '21 at 16:42
  • Hi @Eliseo I do that, In this.dataSource.data = this.datab as Permission[]; this.paginator.length = result.paginatorInfo.total; this.length = result.paginatorInfo.total; It doesn't work, BUT if I make a button and when commit make this.paginator.length = this.length; It works, give the correct value to the paginator. I think that's a bug in MatPaginator, it update the paginator length with the length of the datasource after I assign the value – Agustin Jul 28 '21 at 20:18

1 Answers1

1

You have to remove this line

 this.dataSource.paginator = this.paginator;

because it sets totals rows to current page

wafa_zitouna
  • 47
  • 1
  • 8