Get the current order on the row-reorder event

jollywood

Hi,

I've a table with ~20 rows and ~10 columns (including a column with unique identifier). I need to get the current order of all rows after the row-reorder event. e.g.

This is my table at the beginning.

ID Name Value   Comment
1   tet    12   justify
2   wus    00   happy
3   mor    25   glorify

Then I reorder (drag and drop) the ID 3 on the first position.

ID Name Value   Comment
3   mor    25   glorify
1   tet    12   justify
2   wus    00   happy

and I would like to get 3,1,2 in the console output after I dropped the ID 3 in the first poisition. So of course I need to listen on the row-reorder event. I've tried it with myTable.columns(0).data().eq(0) on the row-reorder event:

myTable.on( 'row-reorder', function ( e, details, edit ) {
    console.log(myTable.columns(0).data().eq( 0 ));
}

And this does indeed return the order if I swap to rows next to each other, but it does not return the correct order if I drag and drop the third row on the first position (so not two rows next to each other). I don't know why, though.

But if I call myTable.columns(0).data().eq(0) manually in the chrome-dev-console after my row-reorder, it does return the correct order (3,1,2). You can try it yourself with the code snippet above.

What am I doing wrong?

jLinux

And this does indeed return the order if I swap to rows next to each other, but it does not return the correct order if I drag and drop the third row on the first position (so not two rows next to each other). I don't know why, though.

Im not 100% sure what you mean by that. If you made an instance on live.datatables.net, that would help a lot, or if I could see the website youre working with.

If the problem you're running into, is you arent seeing the correct order every time the row-reorder fires, then I had that problem too actually. Now I dont know why, im sure theres a reason, but it looked as if the event was firing off before the elements in the dom were 100% "settled".. Not sure how to say that. Its as if it fires when you let go of the mouse, but before the rows are actually put in their correct positions.

I had a hidden input that needed to have the correct order that the row was in, and updated whenever the rows were re-ordered. so this was my solution...

$fields_dt.on( 'row-reorder', function ( e, diff, edit ) {
    // Wait for the dom to settle before doing anything
    setTimeout(function() {
        // Update the field order values
        $fields_table.find('tbody').find('tr').each(function(i,r){
            $(r).find('.row-order' ).val(i);
        });
    }, 10); // Give it time to load in the DOM
} );

jollywood

I can't get it to work on live.datatables.net, but here's a jsFiddle: http://jsfiddle.net/y4gxfz16/1/

• Open the dev console
• Drag and drop the row with id 2 above id 0
• Console will print ["2", "1", "0" ....] instead of the actual order: 2,0,1,..

And I want it to print the actual order after the reorder.

Don't worry about the code, it's a bit messy. The reorder-event is at line 90.

jLinux

Did you look at what I stated above? About how I did it?

jollywood

Yes, I can't get it to work with your code snippet, though we are facing the same problem.

Edit: Got it. You da real MVP! Thanks.
http://jsfiddle.net/y4gxfz16/3/

jLinux

Oh nice, haha, glad I could help! :)

Told you though, its weird, have to wait just a split second, or else the DOM elements arent in place.

jollywood

I first thought that I can't wait 10 seconds, I need the current order directly after reordering. But hey, it was just 10 milliseconds and it works flawlessly! Thanks for that, I'm not used to Javascript :)

jLinux

Try 1 millisecond... i think thatll work too actually

Im sure theres a better way to do it, using datatables api to loop thru the data, but this works for now atleast.