Topic: How to dispose and re-create a datatable in response to an Ajax request
Expected behavior Instead of creating a datatable and updating it in response to an Ajax request, I'd like to dispose it and re-create it, in order to modify the sortField and sortOrder values.
Actual behavior If I invoke dispose and then re-create the datatable, the table is rendered with duplicate column headers.
Resources (screenshots, code snippets etc.) https://mdbootstrap.com/snippets/standard/torroni/5254616
Add document.getElementById('datatable').innerHTML = ''; after dispose. This should help. We have plans to improve the dispose method to clean up leftover HTML code.
But for the moment it is necessary to use this workaround.
Torroni pro commented 2 years ago
It works, but the new table does not show the up and down arrows when hovering on the column headings. The sorting works, but it does not display arrows, as the original table did. I have updated the snippet to demonstrate this unexpected behaviour: https://mdbootstrap.com/snippets/standard/torroni/5254616
Grzegorz Bujański staff commented 2 years ago
Check out this snippet: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/5271574
Torroni pro commented 2 years ago
Great, it works. Thanks!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 6.2.0
- Device: laptop
- Browser: Google Chrome Version 112.0.5615.121 (Official Build) (64-bit)
- OS: Windows 10 Enterprise 22H2
- Provided sample code: No
- Provided link: Yes