Components: Paginator length property set to length of table dataSource.data.length on pageEvent of paginator

[narendrasinghrathore]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

It should not update to length of data of dataSource

What is the current behavior?

Paginator length property is set to length to dataSource.data.length on pageEvent

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

"@angular/animations": "5.0.0",
"@angular/cdk": "5.0.0",
"@angular/common": "5.0.0",
"@angular/compiler": "5.0.0",
"@angular/core": "5.0.0",
"@angular/forms": "5.0.0",
"@angular/http": "5.0.0",
"@angular/material": "5.0.0",
"@angular/platform-browser": "5.0.0",

Is there anything else we should know?

This is how i update or set the length for paginator

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

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

limit:number = 10;
skip:number = 0;
totalLength:number = 0;
pageIndex : number = 0;
pageLimit:number[] = [5, 10] ;

changePage(event){
  console.log(event)
  if(this.totalLength > this.dataSource.data.length){
     if(this.pageIndex < event.pageIndex){
      // next page
      this.skip = this.skip + this.limit;
      this.getComplains(true);     
    }
  }
}

[josephperrott]

Can you provide a stackblitz reproduction? We aren't able to reproduce the issue you are outlining.

[narendrasinghrathore]

@josephperrott Yes i had try to reproduce and there is something addon to previous error. It add data to table without let us to navigate to next page.
Here is link to view only app
Here is link with code access app

[andrewseguin]

In your last comment, your data source and paginator are not aware of each other. You are adding data to the data source and so the table renders it. When you react to the page event, you are telling the data source to show more data.

If you can re-open with an issue then we can dive in and figure out what's wrong. It seems like you may want to build your own data source to understand how the table uses it. If you need help troubleshooting your app, please refer to the community at Gitter, Google Groups, or StackOverflow.

[narendrasinghrathore]

@andrewseguin

your data source and paginator are not aware of each other.

Can you please help how it's not?
Because i am not able to find where it's causing that issue resulting in no pagination

[andrewseguin]

this.dataSource.paginator = this.paginator;

I recommend checking out the pagination example in the docs as a good starting point: https://run.stackblitz.com/api/angular/v1?file=app%2Ftable-pagination-example.ts

[narendrasinghrathore]

@andrewseguin , can you please help me , so i can try to reproduce the error i am facing ?

Navigation prevented
This sandbox is configured to only navigate webpages whose origin is https://material-angular-5-pagination-issue.stackblitz.io

[andrewseguin]

That looks like you are doing something that stackblitz doesn't allow, unrelated to Material. Feel free to post up your example on StackOverflow where you might have more luck resolving your issue.

[narendrasinghrathore]

@andrewseguin i am able to get data and bind to data table but rather than allow to paginate it just increase the length of table.

I had read the documentation and take reference from the given examples.

But still no success.
Can you please help this out? app

[narendrasinghrathore]

@andrewseguin @josephperrott i think i had successfully implemented pagination in table with dynamic data.
Same code, same version but on my machine it's not same. In this case i think the only solution if you can help me Teamviewer.
Please let me know.

[andrewseguin]

Unfortunately there's only so much troubleshooting we can offer on these issues. If you still need help I strongly encourage you to reach out to the community on StackOverflow, Gitter, or Google Groups.

[narendrasinghrathore]

@andrewseguin Okay.

[narendrasinghrathore]

@andrewseguin What i find is that , on start or you can say when i bind data to table data source.
I also set paginator length property to total length return from http call *( if total length is 0 )

Now on page event that's to next page the total length property is having still same value as it's was on first binding. but length property of paginator vary.

What i understand from this ( https://material.angular.io/components/table/overview#pagination )

If you are using the MatTableDataSource for your table's data source, simply provide the MatPaginator to your data source. It will automatically listen for page changes made by the user and send the right paged data to the table.

the above apply to data which is static or all loaded once( via http call ), but if we want to load data on page event then, this below would apply

Otherwise if you are implementing the logic to paginate your data, you will want to listen to the paginator's (page) output and pass the right slice of data to your table.

So i removed this line

// this.dataSource.paginator = this.paginator;

And now it's working as expected.

So if data source is not dynamically changing or loaded all at once then we can simply provide the MatPaginator to your data source
Or else we don't need to.

[duard]

I'm having the same problem, the length property is modified when in the page event for the total of retrieved records and not the total total property that I searched for from my API. Your solution works for me @narendrasinghrathore .

[raymondle]

Thank @narendrasinghrathore , I have same issue and remove this line
this.dataSource.paginator = this.paginator;
help me resolved it.

[tamalkundu007]

@narendrasinghrathore
If I removed this then errors are throwing
this.dataSource.paginator = this.paginator; .
But I use this
this.dataSource = new MatTableDataSource(this.users); this.dataSource.paginator = this.paginator; this.dataSource.sort = this.sort; this.dataSource.paginator._length = this.length;
As a result the value of this.length is replaced after clicking once in paginator but not onload.

Please Help me out..
Thanks in advance :)

[narendrasinghrathore]

@tamalkundu007 Can you please try to reproduce error on stackbliz , also do mention what error you are getting ?

[GadyTal]

Otherwise if you are implementing the logic to paginate your data, you will want to listen to the paginator's (page) output and pass the right slice of data to your table.

@narendrasinghrathore
So it means that Mat-Paginator can't handle server-side pagination automatically?
I need to 'trick' the user by showing the exactly 'data-pieces' that needs to be seen in the current page?
Also what about the cost of server requests in every page-change and page-size changes?

There is got to be some other way...

Thx in advance!

[narendrasinghrathore]

@GadyTal if data is not more than 100-300 items you can bind it to mat-table dataSource at once and it will work fine.
You can find examples on material.angular.io

While if items exceed more for.eg 1000 or more we can request data in chunks considering performance.

In my scenario,

the mat-table dataSource receive items real time, so paginator also need to be updated for the same to display exact page or else it will not paginate and the list continues to grow.

Hope you are clear now.

Regards

[SamiHK]

If I have 20 Records and PageSize is 10.
On second time I call data the next button become disable in Material-Table how to keep material table
next button enable?

[eplatzek]

Hey all. I've seen this bug for server side pagination.

The problem appears to be that when you are connecting a paginator to the MatTableDataSource, you are providing a way for the paginator to update the length property based on that data source. If you are also providing length as well, that length value will be overwritten when the data source gets updated.

A solution is to not connect the paginator to the MatTableDataSource. You do not need an ngIf*. If you do not connect the paginator to the datasource the only source that the paginator uses to update are the properties you explicitly provide.

So your paginator will look something like this

[length]="total$ | async"
[pageSize]="pageSize$ | async"
[pageSizeOptions]="pageSizeOptions"
[pageIndex]="currentPage$ | async"
(page)="onPaginateChange($event)">

And your component will not have any reference to paginator or MatTableDataSource.

Note: In my use case, I'm using paginator without using a MatTable and instead iterating on a custom component. If you are using MatTable then simply don't connect the paginator to the datasource and nix this code: this.dataSource.paginator = this.paginator

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}