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.) https://mdbootstrap.com/snippets/standard/torroni/5254616


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: https://mdbootstrap.com/snippets/standard/torroni/5254616


Grzegorz Bujański staff commented 1 year ago

Check out this snippet: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/5271574


Torroni pro commented 1 year ago

Great, it works. Thanks!



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

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