rowReorder: the dragged row jumps back to its old position

princeofnaxos

Hi,

After dragging a row, should the table not be displayed in its new state?

When I drag a row and drop it, it jumps back to its old position. The data of the 'row-rorder' event is correct though, so if I save the new order in the database and reload the table with table.ajax.reload(), the changes become visible. But that is not visually beautiful.

I have only the option "rowReorder: { selector: 'tr' }" when I initialize the table. Can't find anything else in the documentation...

Regards,
Edwin

colin

Hi @princeofnaxos ,

As can be seen in this example, yep, the rows do slot into their new positions.

We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

isaacd

I had the same issue and the fix was to remove the "order" parameter.

With it, it seems to keep applying that as the ordering column. To set the initial order you would need to do that from the server side before displaying probably.

Might be good to have that stated in the documentation.

princeofnaxos

No, that doesn't help. First of all, I need the tables to be ordered descending on the first column, but even without the 'order; option, the row still pops back to its old position.

princeofnaxos

@colin The table is available at https://admin.dev.campiano.net/categories/.

kthorngren

Reordering seems to be working in your example. Do you still have issues?

Kevin

colin

Yep, I'm seeing your problem. Kevin, there's a little twitch right after the release, it jumps back to the old position, then gets redrawn again in the correct position. I'll take a look in more detail tomorrow,

C

kthorngren

there's a little twitch right after the release, it jumps back to the old position, then gets redrawn again in the correct position

I noticed that but thought it was due to the delay in the ajax response I was seeing.

Kevin

allan

Change:

rowReorder: true

to be:

rowReorder: {
  dataSrc: 'listing_order'
}

See rowReorder.dataSrc and this example for details. Basically the reordered data is not being written to the objects on the client-side which is why it flicks back.

Allan

princeofnaxos

@colin @kthorngren The redraw is done by script on the row-reorder event. I first save the new order and then do table.ajax.reload( null, false );

princeofnaxos

@allan @colin @kthorngren Tried Allans suggestion, but that didn't solve it. Meanwhile, just by pure coincidence, I found the culprit. I had order: [] which was there to preserve the ordering as it was retrieved from the database (descending on 'listing_order'). Now I changed it to order: [ [0,'desc']] and the row doesn't flicks back any longer.

Allans suggestion is needed though! Without it, it flicks back again.

allan

Ah - yes, you normally want ordering on the column that defined the reordering parameter. Anything else can get super confusing!

Good to hear you have it working now.

Allan

tonci14

I had this issue, using ordering: false. You need to set
ordering: true
and than
columnDefs: [ { orderable: false, targets: [ 1,2,3 ] } ],