ColReorder error when re-initialising datatable after updating table data

ctaylor_hg

Link to test case: https://jsbin.com/xizisamaje/edit?html,css,js,console,output
Debugger code (debug.datatables.net): adicof
Error messages shown:

datatables.min.js:26 Uncaught TypeError: Cannot read properties of null (reading 'parentElement')
    at _._scrollRegions (datatables.min.js:26:7747)
    at _._mouseDown (datatables.min.js:26:5194)
    at HTMLTableCellElement.<anonymous> (datatables.min.js:26:3934)
    at HTMLTableCellElement.dispatch (jquery-3.7.1.min.js:2:40035)
    at v.handle (jquery-3.7.1.min.js:2:38006)

Description of problem: Re-initialising the datatable after replacing the table data through jQuery causes re-ordering columns to stop working and log an error message. Other functionality appears to still work.

allan

It is unhappy about the changing to the HTML. If destroy the table using the API and then reinitialise it it works okay: https://jsbin.com/xizisamaje/edit?js%2Coutput= .

Allan

ctaylor_hg

Hi allan thanks for getting back so quickly, apologies I can't see any changes made in the code you linked.

I am already passing in the destroy argument into the constructor, so I would assumed that would be enough. I have also tried calling $('#example').DataTable({ retrieve: true }).destroy(); before re-initialising but no luck on my end.

ctaylor_hg

After some more digging it looks like the issue is caused by the fact that the listeners aren't being removed from the th elements correctly when destroying the datatable. Removing these with $('#example th').off(); before re-initialising the table seems to fix it.