jquery DataTables row reordering: order reverts back after drop

Question

I am trying to use jQuery DataTables (http://datatables.net/) with the Row Ordering plugin (http://code.google.com/p/jquery-datatables-row-reordering/wiki/Index). Originally, the re-ordering of rows looked like it worked, however there was a javascript error "Error: Syntax error, unrecognized expression: #". So I implemented the solution outlined here: http://datatables.net/forums/discussion/19011/drag-and-drop-row-reordering-issue Giving the tr elements unique ids. Now there are no javascript errors. However, the row re-ordering doesn't work at all now. I drag a row, but when I drop it, the table just reverts back to its previous state.

Here's the full HTML file with javascript: http://pastebin.com/2P9hJ7n2

Has anyone else encountered this problem? If so, how have you solved it?

I tried digging around in the row reordering javascript and it looks like the problem is grabbing the current and previous position of the row:

// fyi: properties.iIndexColumn is 0
var iCurrentPosition = oTable.fnGetData(tr, properties.iIndexColumn);
//...
oTable.fnGetData(trPrevious[0], properties.iIndexColumn);

Whatever it's expecting to get from fnGetData has changed. I've iterated over what oTable.fnGetData(tr, i) returns for a couple of values of i and it seems to be the cells of the row.

My guess is the implementation of DataTables has changed since this plugin was written. I'm just wondering if it's possoble to fix this easily or not.

Answer 1

To prevent revert back after drop use "update: false" attribute.

var table = $('#categories').DataTable( {

    "ajax": "someurl",

    "rowReorder": {
        selector: 'tr',
        update: false,
    },

});

Answer 2

As you can read in the wiki-link you provided,

• Each TR element must have id attribute.
• One column in the table should be indexing column. This column will be used for determining position of the row in the table. By default this is first column in the table. You can see structure of the table on the live example page.

The "unrecognized expression: #" was related to the first demand; that you are not able to move the rows around is related to the second. You simply lack an indexing column. As you have figured out with the missing <tr> #id, you can easily create that column programmatically :

$("#mySuperTable thead tr").prepend('<th>#</td>');    
var count = $("#mySuperTable tbody tr").length-1;
$("#mySuperTable tbody tr").each(function(i, tr) {
    $(tr).attr('id', 'id'+i);
    $(tr).prepend('<td>'+parseInt(i+1)+'</td>');    
    if (i==count) {
       $("#mySuperTable").dataTable({
           //...initialization options
       }).rowReordering();
    }     
});  

Now RowReordering works with your table -> http://jsfiddle.net/gy8s3hoa/

Notice the demo above are running dataTables 1.10.x. The issue has nothing to do with dataTables versions or some changes in dataTables internals, it is simply about how the RowReordering plugin is created. It is not very elegant, if you ask me. The plugin should create the id's and the index column it is needing (and make it hidden) by itself.