Row-Reorder - how to revert changes

ianoel230982

Link to test case: https://live.datatables.net/cisejubo/3/edit?html,js,output
Debugger code (debug.datatables.net): N/A
Error messages shown: N/A
Description of problem: I am using row-Reorder to re-order rows, before i persist the changes, i may decided that i want to revert any changes back to the original data from when the table first loaded.

My example is of a 'cancel' button that, when clicked, clears the table and then attempts to re-add the data from the original source in the original order.
My test case is quite rudimentary but you can hopefully get the idea what i'm trying to do.

I expect that when i click the cancel button the table is re-drawn with the data from the original array of objects, but nothing is happening and the data in the table is remaining the same;
I would be grateful if you could point me in the right direction.

Thanks :-)

rf1234

Hmmm ... Using your example I try to reorder rows. Doesn't work. Hence I can't test the "cancel" button either. Could you fix this please. Thanks!

ianoel230982

It works fine for me, click and hold whilst hovering over any 'cell' containing the number, then drag to re-order.
But here's another link to try - https://live.datatables.net/cisejubo/5/edit

kthorngren

The problem is due to how Javascript handles assigning objects. ajaxCopy is a pointer to the original object which is changed. When you try to use it with rows.add() is using the original data via the pointer. See this example with additional console output:
https://live.datatables.net/cifonuya/1/edit

Use something like structuredClone to make a clone of the original object. For example:
https://live.datatables.net/neyobubi/1/edit

Also note that you don't need rows().invalidate().

Kevin

ianoel230982

Thanks for pointing me in the right direction. I have noticed that clicking the cancel button the first time will revert the order, however if i re-order again, and any subsequent times, the table is not re-ordering. So i added the structuredClone into the rows.add method and it now works every time.

table.rows.add(structuredClone(ajaxCopy)).draw()

Thanks again :-)