New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Paginator length property set to length of table dataSource.data.length on pageEvent of paginator #10526
Comments
Can you provide a stackblitz reproduction? We aren't able to reproduce the issue you are outlining. |
@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. |
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. |
Can you please help how it's not? |
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 |
@andrewseguin , can you please help me , so i can try to reproduce the error i am facing ?
|
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. |
@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. |
@andrewseguin @josephperrott i think i had successfully implemented pagination in table with dynamic data. |
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. |
@andrewseguin Okay. |
@andrewseguin What i find is that , on start or you can say when i bind data to table data source. 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 )
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
So i removed this line
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 |
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 . |
Thank @narendrasinghrathore , I have same issue and remove this line |
@narendrasinghrathore Please Help me out.. |
@tamalkundu007 Can you please try to reproduce error on stackbliz , also do mention what error you are getting ? |
@narendrasinghrathore There is got to be some other way... Thx in advance! |
@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. While if items exceed more for.eg 1000 or more we can request data in chunks considering performance. In my scenario,
Hope you are clear now. Regards |
If I have 20 Records and PageSize is 10. |
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 <mat-paginator 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 issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
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
The text was updated successfully, but these errors were encountered: