mat-paginator length property changes when calling next page from server

0
votes

Im using mat-paginator with mat-table. New data is loaded from the server each time on (page) event.

Paginator:

 <mat-paginator [length]="totalCount" (page)="pageChange($event)" [pageSizeOptions]="['10', '20']" showFirstLastButtons [ngClass]="{'hidden-table':dataSource?.data.length<11}" class="mat-paginator table-paginaton">
  </mat-paginator>


  pageChange(event) {
    if (this.dataSource.data.length < this.totalCount && this.nextPageUrl) {
      this.nextPage();
    }
  }

  nextPage() {
    this.showProgressBar = true;
    this.http.get(this.nextPageUrl).subscribe((data: any) => {
      this.showProgressBar = false;
      this.nextPageUrl = data.next;
      this.dataSource.data = this.dataSource.data.concat(data.results);
      this.totalCount = data.count;
      this.dataSource.paginator.length = this.totalCount;
    });
  }

On the firstPage , the total length is disaplyed correctly . When i click on next page and new data is loaded from server , the length property is displaying incorrectly.

Example:

I have 23 rows , my pageSize Option is set to 10. Initially it shows "1-10 of 23" . When i navigate to the next page , it shows "11-20 of 22" .Here 22 is incorrect as total length is 23. After navigating to 3rd page , it again displays correctly as 23.

I want the new to be concatenated with the dataSource since i do not want to call data from server when navigating to the previous page .I found answers like remove

 this.dataSource.paginator = this.paginator.

But couldn't find any satisfactory answers. Any other way to make the length display correctly?

1
angularangular-materialmat-table

1 Answers

0
votes

This fixed my issue:

 this.paginator._intl.getRangeLabel = (page: number, pageSize: number, length: number) => {
      const start = page * pageSize + 1;
      const end = (page + 1) * pageSize > this.totalCount? this.totalCount: (page + 1) * pageSize;
      return `${start} - ${end} of ${this.totalLength}`;
    };