Topic: How to dispose and re-create a datatable in response to an Ajax request

Torroni pro asked 1 year ago

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.)

Grzegorz Bujański staff answered 1 year ago

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 1 year 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:

Grzegorz Bujański staff commented 1 year ago

Check out this snippet:

Torroni pro commented 1 year ago

Great, it works. Thanks!

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: 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