row-reordered with serverside processing through ajax call does not behave as expected

mcselasvegas

I have a scenario that populates a datatable through an ajax call. Once the table is drawn I use the row-reorder function to loop through the list with the intent to update the new sequence on the server with another ajax call inside the table.on('row-reordered', function (). But the table always get repopulated before the row-reorder function does its job. Doea anyone have a solution on how to handle this? Please see sample test below...

http://live.datatables.net/ziwuzebi/1/edit

colin

It's probably caused by the asynchronous nature of the ajax call. Try moving your code into initComplete and see if that helps - there it will only be called after the table is populated.

Colin

kthorngren

Its going to cause twoajax requests but one option is in the success function call draw() again.

Kevin

mcselasvegas

Hi Kevin,

I am not quite sure how to implement your suggestion. I tried to draw the table from inside the success function which causes an endless loop, see sample code.

http://live.datatables.net/subozuno/1/edit

Could my problem be solved by using editor? I am trying to solve this for over a week now and don't seem to get closer...

Thank you,
Oliver

kthorngren

Seems to work here:
http://live.datatables.net/subozuno/2/edit

I updated the Ajax URL to use a SSP script with ID's. More info here. Used the last script under server side processing. I also enabled serverSide: true and change the columns.data config to match the data structure.

Added a success function which uses draw(false). Note the console.log outputs the JSON response. That is the response from the ajax request not the draw(). Note also the updated table isn't really updated - its just simulating the ajax request.

Make sure you are using .one() not .on() for the draw event, here:

  table.on('row-reordered', function () {

    console.log("Row-Reorder");

    table.one('draw', function () {

If you use .on() then you would see an infinite loop.

Kevin

mcselasvegas

I sure appreciate that you take the time to look into this...
But the code shown below still produces the originally loaded list even after I row-reorder by dragging a row... I would like to take the rearranged list - which I can not produce right now, upload it to the server and make changes to the data-source there - and then update the table with the list in its new order...

table.rows().every(function (rowIdx, tableLoop, rowLoop) { var data = this.data(); DATA.push({ ProductId: data.first_name }); }); console.log(JSON.stringify(DATA));

http://live.datatables.net/subozuno/4/edit

thanks,
Oliver

kthorngren

I don't see a way to get the reordered list like that. One option might be to use the second parameter of the row-reordered event to get the changed data and send that to the server. It contains the rows of the reordered rows. I provided an example of what you might work:
http://live.datatables.net/subozuno/5/edit

In the row-rerodered event use the diff data to get the original data and row ID along with the new row ID. POST that to the server to update your DB.

Inside the row-reordered event invoke the -even preDraw event and simply return false to stop the table draw. I added a couple draw events just to see that they occur when expected.

I haven't fully tested this but it seems like it might work.

Kevin

mcselasvegas

light-bulb moment... Let me digest and play with this for awhile - I get back to you!
Thank You - Stay Safe!