Row reorder not update oldPosition and newPosition at drop event

itajackass

Hi i don't understand how to update new "position" after a rowreorder event was dropped to new position.

I try to tell what i need (using my example at the end):

I have a table with a time start, duration, and time end.
Every row start at the same time the row before ends.

Now if I want to change position for ROW-4 into position ROW#2, I want that the START value of ROW#4 (at new position 2) become the END of ROW#1, and the END of ROW#4 (at the position 2) must be recalculated by its ORIGINAL DURATION.

So:

Phase W with original start at 20, after positioned into position 2, start must became 16 (the end of row 1) and END must became (16 + 4 (original duration of phaseW)) = 20.
Then next rows are calculated with same logic (start became the END of previous row, and END is calculated by the new START + ORIGINAL duration).

So the last ROW END must be ALWAYS 24 of course!

My example above works only 1 times! (try to position PHASE W before PHASE Y).

But now, If I try to do another ordering after new configuration, (example PHASE Z before PHASE W) you can see all STARTS breaks (and of course ENDS)!

The logic is that LAST ROW has always 24 as END because changing order of rows the duration is always the same!

It seems that datatable after dropped row doesn't update the new oldPosition and newPosition attributes?

Here my example:

https://live.datatables.net/garizoxa/368/edit

itajackass

The workaroud is to destroy table:

https://live.datatables.net/guceyezo/2/edit

But I ask if there is a better way

kthorngren

Looks like you will want to use the row-reordered event instead of row-reorder. Updated test case:
https://live.datatables.net/garizoxa/369/edit

Kevin

itajackass

Sorry this is the correct link for workaround:

https://live.datatables.net/guceyezo/3/edit

But it see is a old version 1.x datatables. with 2.x datatables it doesn't work:

https://live.datatables.net/buxinuve/1/edit

kthorngren

Looks like you replied at the same time I did. Just making sure you saw my above response.

Kevin

itajackass

Hi sorry your test case doesn't work: https://live.datatables.net/garizoxa/369/edit

If you try to reorder multiple times... the last row end breaks! (it works only on first iteration... then breaks)

For logic of duration rows, it must be always 24.

Also the example demo ( https://live.datatables.net/guceyezo/3/edit ) is based on 1.x datatables. switching on 2.x version, my workarouds doesn't work

kthorngren

I see, sorry I misunderstood the issue. Likely the issue is due to how row().invalidate() works. It doesn't seem to be updating the rows based on re-reading the DOM nodes. Instead of updating the DOM I would use the row().data() API to update the row's data directly.

Kevin

itajackass

No success migrating to row.data():

https://live.datatables.net/zomovaca/2/edit

kthorngren

The problem looks to be using diff[i].oldPosition and diff[i].newPosition as the row-selector in this statement:

$(tabellaFasi.row(diff[i].oldPosition).node()).find(".start").text($(tabellaFasi.row(diff[i].newPosition).node()).find(".start").text());

This is being used as the row index. The row index does not change throughout the life of the table. This is not to be confused with the index column.

Just so it's more clear to me I updated the test case to remove accessing the DOM elements. The key change is this:

              var newData = diff[i].newData;
              
              // Find original row in the reordered rows diff
              var originalData = diff.filter((row) => row.oldData === newData)[0];
              
              // Use the original row's node to get the original start
              var oldRow = tabellaFasi.row( originalData.node ).data();

It finds the original row in the rowreorder diff to get that row's node element. The node is then used as the selector to get the row data. Now each time it should start with the row that was dropped on. Likely you can change your first test case to use this code and still update the DOM nodes if you prefer.
https://live.datatables.net/tucihiri/1/edit

Kevin

itajackass

wow thank you for the help and explanation! Now i'll try to understand better and adapt to my app.!

Then i'll try to do the opposite case: put a row AFTER another one... because this scenario doesn't work actually

itajackass

Ok i'll update my example (based on DOM) to reach my goal, if anyone interested.
Also i've implemented the check for phases without end to be ignored.

https://live.datatables.net/mosidese/3/edit

kthorngren

Very cool, thanks for the updated working test case!

Kevin