Topic: Datatable within modal modal cannot show Rows Per Page correctly
Expected behavior Paginated table can display the number of records as per selection below the table
Actual behavior Case 1: Rows per page cannot be changed. Case 2: Selected 200 rows per page, successfully displayed 200 rows. But when select back to 10 rows, it remains at 200.
Resources (screenshots, code snippets etc.) I created a snippet. You can call out the modal window that displays the datatable via the button.
https://mdbootstrap.com/snippets/standard/hanzc/4942459#html-tab-view
Thanks Mike
I think I know what caused this problem and it is not related to the datatable itself. It happens because when the user is about to click on the select option, the content of the modal scrolls to the top (but this happens on mousedown, not on click). As a result, the select option is not clicked at all.
Try this on your own:
Open example2, try changing the pagination and see what is printed in the console. Meanwhile, example1 has its size reduced via the maxHeight dadatable option, so the modal has no scroll and the error does not appear.
https://mdbootstrap.com/snippets/standard/mlazaru/5010345
If you want to keep the modal's body scrolling, another possible workaround is to force click after the mousedown event on the select option.
I think if you can fix the case 1, most likely it should fix case 2 as well.
I have no idea how to reproduce case 2 in he snippet but it always happen on my local PC.
I was only able to reproduce case 1 using your code. Do you have any advice how could I do that? I'll add it to our todo list and I hope it will be fixed soon.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 5.0.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes
hanzc priority commented 1 year ago
Hi For some reason, at the point of snippet creation, it wasn't working.
Upon publishing the snippet, and re-run the codes, everything works ok.
Please advise