JQuery Datatable Row Reorder

JiaweiTan

Hi Allan,

I need some help with the Row Reorder Extension.
For my datatable, I am using Javascript Sourced Table have added the rowReorder: true in.

According to your examples, I have added in this code

$('#example').on('row-reorder.dt', function (dragEvent, data, nodes) {
                alert('row #' +
                      data[0].node._DT_RowIndex +
                      ' moved from pos ' +
                      data[0].oldPosition +
                      ' to pos ' +
                      data[0].newPosition + "\n" +
                      'row #' +
                      data[1].node._DT_RowIndex +
                      ' changed position from ' +
                      data[1].oldPosition +
                      ' to ' +
                      data[1].newPosition
                     );
                console.log(data);
            });

It is able to tell me which rows changed but there is no changes made.
The rows did not remain there after the reorder and returned to the default rows.

Is there any additional step that I need to do?
Like physically reorder the Array Sourced data by myself and then reload the table?
Because from your examples, it seems that it will automatically update the data row.

Thanks!

allan

Can you link to a page showing the issue please?

Allan

JiaweiTan

Hi Allan,

Thanks for the speedy reply.
I have created a sample on Jsfiddle
https://jsfiddle.net/mt4zrm4b/9/

allan

RowReorder uses a "data swap" method of reordering - i.e. it doesn't just shift the DOM elements around in the table - the order of the items in the table is still defined by the ordering applied to the table. But rather what it does is to swap a data point in the data source objects based on the reorder - you need to use rowReorder.dataSrc to tell it what item to swap.

This means that RowReorder might not be what you need - it is basically designed to edit a sequence of data rather than to actually provide a way to order items in the DOM table. Having said that, one way you can have it do that is to use a hidden counter (index) column which the dataSrc points to.

Allan

JiaweiTan

Hi Allan,

Thanks for your explanation.
It's really clear and I have managed to get it working.

I realized that the row reordering only works when it is sorted based on the Index column though. If it were to sort on other columns, reordering wouldn't work. But anyways, for what I am doing, this solution works just fine.

JiaweiTan

Just to clarify, this row reorder does not make any changes to the Javascript sourced array. But with the use of a hidden counter (index), it will show that the row have been reordered. I will still need to manually update the Javascript sourced array order by myself right?

JiaweiTan

Updated: https://jsfiddle.net/mt4zrm4b/11/

allan

I will still need to manually update the Javascript sourced array order by myself right?

No - it should rewrite the data source objects for each row to reflect the updated data. Only the item pointed to by rowReorder.dataSrc will be modified.

Allan