Datatable within modal modal cannot show Rows Per Page corre


Topic: Datatable within modal modal cannot show Rows Per Page correctly

hanzc pro premium priority asked 2 years ago

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


hanzc pro premium priority commented 2 years 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


mlazaru staff answered 2 years ago

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.


hanzc pro premium priority commented 2 years ago

Hi, Any idea when this will be fixed? Are there any workaround?


hanzc pro premium priority answered 2 years ago

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.


mlazaru staff answered 2 years ago

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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Pro
  • 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