Paginator length being set to page size instead of defined length (http pagination)

[iget-master]

Bug, feature request, or proposal:

I'm trying to implement HTTP pagination as exemplified on documents with my own API.
The problem is that the total items count (length) is being set incorrectly!

My code follows exactly the same thing of the example.

What is the expected behavior?

It should just respect the value that I set. On my code, I use my API response (total) to set the paginators length, just as on the docs example.

What is the current behavior?

Looks like the length "blinks" from the total given by API to the current page length.

For example, if I load a resource that have a total of 9 items, and the page size is 5,
imediatelly after it load, I can see (very fast) the total of 9, with the next button enabled, then
it goes to 5 (the page length, not the total).

If in the same same, I set page size to 10, it shows the total of 9 (right, because the page 1 have exactly 9).

Looks like this is a behavior from non http pagination, where it try to paginate from the entire dataset.

What are the steps to reproduce?

Cannot provide a plunker right now, but the relevant code is:

ngAfterViewInit() {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;

    merge(this.sort.sortChange, this.paginator.page)
      .pipe(
        startWith({}),
        switchMap(() => {
            this.isLoadingResults = true;
            return this.modelProvider.list({page: this.paginator.pageIndex + 1, size: this.paginator.pageSize});
        }),
        map((collection: Collection<any>) => {
          this.isLoadingResults = false;
          this.resultsLength = collection.meta.total;

          return collection.data;
        }),
        catchError(() => {
          this.isLoadingResults = false;
          return observableOf([]);
        })
      ).subscribe(data => this.dataSource.data = data );
  }
ngAfterViewInit() {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;

    merge(this.sort.sortChange, this.paginator.page)
      .pipe(
        startWith({}),
        switchMap(() => {
            this.isLoadingResults = true;
            return this.modelProvider.list({page: this.paginator.pageIndex + 1, size: this.paginator.pageSize});
        }),
        map((collection: Collection<any>) => {
          this.isLoadingResults = false;
          this.resultsLength = collection.meta.total;

          return collection.data;
        }),
        catchError(() => {
          this.isLoadingResults = false;
          return observableOf([]);
        })
      ).subscribe(data => this.dataSource.data = data );
  }

And my paginator on view is defined:

<mat-paginator #paginator
               [length]="resultsLength"
               [pageSize]="5"
               [pageSizeOptions]="[5, 10, 20]"
               *ngIf="paginate">
</mat-paginator>

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

The latest available versions, I've just installed everything.

[iget-master]

Not sure, but looks like the problem occurs here: (see line 223) https://github.com/angular/material2/blob/2b2eb185af1b67b04d66a49085d51772b58bc365/src/lib/table/table-data-source.ts#L219-L231

Since the data is being paginated on backend, it should not be filtered on front-end (or if so, it should not change the totals, since it will be filtering only the current page)

[julianobrasil]

There must be something with your setup. I have an app that I use for testing and it's working just fine (backend in java):

[iget-master]

@julianobrasil I've checked many times my setup, didn't found anything wrong.

Following the table-data-source.ts logic:

The _updateChangeSubscription() method watches for data, filter, sort or page changes, then trigger the following map methods: _filterData(), _orderData() and _pageData().

IMHO, the problem is that _filterData() don't cares about if I'm loading the data asynchronously, and overrides the length provided by my code using the length input on the paginator component.

Not sure if it's related, but the StackBlitz on the docs simply don't work: https://stackblitz.com/angular/gokmekyjoxr

[iget-master]

Found the reason.

In some doc example, I've found that I need to put this inside ngAfterViewInit.

this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;

On the http example, this lines doesn't exists. That's the reason. Since the pagination isn't controlled by the table itself, the paginator should not be associated to it (neither the sort).

I think that the docs should be clearer about this. Unfortunately I'm on vacation now and can't send a PR with a fix for the docs. I'll love if someone do it.

[julianobrasil]

Do you mean the example below? If the answer is yes... well, the example itself is working as expected. In this case the paginator is not bound to the datasource at all: this.paginator.page observable is used to fire the function that grabs the desired data from the server and, after that, set datasource.data:

this.datasource.data = dataReceivedFromServer

[andrewseguin]

Can you re-open with a reproduction of your issue in stackblitz so we can investigate the issue?

[vicatcu]

I have to agree, I just went through the same experience / confusion as @iget-master with my own attempt to follow the examples. Taking this code out of ngAfterViewInit made it behave as I expected it to.

this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;

The docs could certainly explain this more clearly in the context of the HTTP example, imho... it's quite easy to overlook that difference among the examples.

[narendrasinghrathore]

@andrewseguin When i move to next page and make a http call, paginator length is changed to length of table datasource.data
i am just updating the totalLength only if it's 0 .

if(this.totalLength === 0){ this.totalLength = data.total; }

<mat-paginator #paginator [length]="totalLength" [pageSize]="limit" [pageSizeOptions]="pageLimit" (page)="changePage($event)"> </mat-paginator>

[julianobrasil]

@narendrasinghrathore, do you think you'd be able to reproduce it using a stackblitz demo? I've never faced this issue in any projects of mine.

[narendrasinghrathore]

@julianobrasil i can share my teamviewer to show you.
It's hard to setup with same scenario

[julianobrasil]

Not today. I have an appointment at the ophthalmologist right now and probably I won't be able to use a computer for the rest of the day after that.

[narendrasinghrathore]

@julianobrasil No issues, i will try reproduce online if possible or else please help out on teamviewer if you can.

[rakeshg2t]

It solves when I use a flag to *ngIf the page and toggle before and after the rest call executes. I showed a spinner when *ngIf is false.

TS :

this.service
 .get('pools/calculations',{ pageNumber: page?page:this.page, pageSize: pSize?pSize:this.pSize })
 .then(data => {
   this.isLoadingResults=false;
   const ELEMENT_DATA =data.searchResults;
   this.dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
   this.dataSource.paginator = this.paginator;
   if (data.pagingInfo && typeof data.pagingInfo == "object") {
     this.pageSize = data.pagingInfo.pageSize;
     this.listLength = data.pagingInfo.totalRows;
     this.pageNumber = data.pagingInfo.pageNumber;
     }
 })

HTML:

<div class="loading-indicator">
    <mat-spinner *ngIf="isLoadingResults" class></mat-spinner>
</div>

<div class="example-container mat-elevation-z8" *ngIf="!isLoadingResults">
    <mat-table #table [dataSource]="dataSource">

        <!-- Name Column -->
        <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.poolName}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="symbol">
            <mat-header-cell *matHeaderCellDef> Updated </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

    </mat-table>

    <mat-paginator #paginator [pageIndex]="pageNumber" [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 20]" [showFirstLastButtons]="true" [length]="listLength" (page)="pageEvent($event)">
    </mat-paginator>
</div>

But if I remove the ngIf the problem occours.