Topic: datatable pagination bug
ammi pro asked 9 months ago
Expected: if table.pagination.total = table.pagination.entries and showAllEntries=true, dropdown on pagination component should show "All". Actual: It shows blank.
<mdb-table-pagination
#paginationSearch
(paginationChange)="onPaginationChange($event)"
[entries]="tableEntries"
[showAllEntries]="true"
>
</mdb-table-pagination>
Rafał Seifert free answered 9 months ago
It seems we have a problem when entries is equal to total with showAllEntries. Thank you for reporting this case. Try updating entriesOptions input accordingly:
<mdb-table-pagination
#pagination
[entries]="tableEntries"
showAllEntries
[entriesOptions]="[10, tableEntries, 25, 50, 200]"
></mdb-table-pagination>
You might have to change the place of tableEntries value in new array to keep it in order. We will add this problem to further investigation. Let us know if that solves your problem.
ammi pro commented 9 months ago
That is not a solution. It just adds another breakpoint to entriesOptions. For example I have 249 rows. If I make [entriesOptions]="[10, 25, 50, 200, 249]". It will display all records, but dropdown will show 249 instead of "All". If you expand dropdown you will see options 10, 25, 50, 200, 249, 'All'. I need to be able to select "All". Can you add option like -1 which will represent "All" or something similar?
Rafał Seifert free commented 9 months ago
So you would like to achieve such effect that if tableEntries happen to be exactly the value of total and showAllEntries is set to true then on init the "All" option will be selected under the hood by our component and it will show "All" from the beggining. Is that correct?
ammi pro commented 9 months ago
If showAllEntries is set to true, I would like to have an option to select 'All' by default.
Rafał Seifert free commented 9 months ago
It's hard to make it work without actual update on our source code. I've prepared a workaround that might work, please have a look:
@ViewChild('pagination', { read: ElementRef }) pagination: ElementRef;
ngAfterViewInit(): void { if (this.tableEntries === this.dataSource.length && this.showAllEntries === true) { const selectComponent: HTMLInputElement = this.pagination.nativeElement.querySelector('mdb-select input'); selectComponent.value = 'All'; } }
In template you should have showAllEntries as component's local property
<mdb-table-pagination
#pagination
(paginationChange)="onPaginationChange($event)"
[showAllEntries]="showAllEntries"
[entries]="tableEntries"
></mdb-table-pagination>
Did you manage to implement such approach to manually change the value of the pagination's select?
ammi pro commented 9 months ago
I will try that, but I would prefer to wait until you update your source code. Thank you very much for your help.
Rafał Seifert free commented 9 months ago
We have added this problem to our to-do list and we will work on this. We will inform you when this issue is solved.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB5 5.2.0
- Device: laptop
- Browser: chrome
- OS: w10
- Provided sample code: No
- Provided link: No