Drag-Drop table rows with jQuery sortable

sronsiek

Hi,

I've managed to implement drag-drop of table rows using jquery sortable,
but it seems very much like a hack to me.

Basically jquery sortable provides all the DOM changes in the table, the row
is visibly moved, but the DataTables internals are not updated, so the next
sort / draw operation (required for instance to re-apply the zebra striping etc)
will undo the drag-drop move. I've managed to overcome this in a very crude
algorithm, by cloning the entir aoData structure, then looping through the rows
writing the re-ordered data in the cloned structure - and finally replacing the
aoData with the the modified version and re-drawing the table with fnDraw.
This code looks as follows:

[code]
j(function() {
j("#example tbody").sortable({
opacity: 0.6,
cursor: 'move',
update: function(ev, ui) {
var oSettings = oTable.fnSettings();
var clonedData = oSettings.aoData.slice();

j('#example tbody tr').each(function(i)
{
var startPos = oTable.fnGetPosition(this);
// alert( "i: " + i + " startPos: " + startPos )

clonedData[i] = oSettings.aoData[startPos];
clonedData[i]._iId = i;

// App specific - first table col contains an incremental count which needs to be refreshed after a move
// Without cloning hack - do this with fnUpdate()
clonedData[i].nTr.cells[0].innerHTML = i+1;
clonedData[i].nTr.cells[0].innerText = i+1;
})

oSettings.aoData = clonedData;
oTable.fnDraw();
}});
});
[/code]


Can you advise:

- is this method safe to use?
- is there a clean way of re-numbering the aoData array indexes?

allan

Generally speaking, changing the order of aoData is a bad thing to do since other parts of DataTables reply on the array indexes in aoData (specifically aiDisplay and aiDisplayMaster). If you want to important drag / drop sorting, what I would suggest is that you use the sorting in DataTables to sort on a specific column, the one that will define the order, and then use fnUpdate to update that column when the drag is complete with the new order and redraw the table.

Having said that - nice solution to a non-trivial problem :-)

Allan

sronsiek

Ok - I'll give that a try ... I think I can tell fnUpdate not to re-draw and call fnDraw once at the end of row looping to avoid flickering & unnecessary rendering ....

sronsiek

Yes - works nicely - thank you!

FredyC

Hello. I would like to ask similar question. Currently I am stuck with SlickGrid, but i am thinking about Datatables, because of great documentation and overall good look. However one of the customer's "must have" feature is reordering of rows. It should allow to him select some rows with mouse and than just drag them somewhere else in the grid. I am not very familiar with DataTables's API, but according to this thread, it would be a problem ?

FredyC

Little bump. No answer to this ? So I presume it is a problem ?

allan

Hi FredyC,

Sorry for the delay in replying - order of rows in DataTables is 100% done by the sorting that is applied to the table. So for example if you click on a column header or call fnSort(). So drag and drop rows is entirely possible, you just need to have the drop event handler update the sorting information that is being applied to the table and then redraw the table (fnUpdate would be the key API method for this). It gets slightly complicated if you want to keep the user ability to sort columns, since you then have 2D sorting and you need to decide which one takes priority.

I'm afraid I don't have an example of code which does this, but I think the best way of doing it would be to write a plug-in for DataTables: http://datatables.net/blog/Creating_feature_plug-ins .

Regards,
Allan

FredyC

Ok, thanks for the answer. I'll look into it. Keep up a great work !