RowReorder reverts row order after I try to swap rows

jgreen

I'm using the plugin RowReorder here. However when I try to drag and drop one of the rows after I release my mouse the row goes back to where it was. I'm using DataTables 1.10.8. Here's some of the relevant code.

<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js" type="text/javascript"></script>
<link href="css/datatables.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/rowReorder/rowReorder.dataTables.min.css">

<script src="js/rowReorder/dataTables.rowReorder.min.js"></script>

...........

var invoiceTable = jq('#filterTable').DataTable( {
            "columnDefs": [
                { "targets" : [0], "visible": true, "searchable": true, "type": "html" },
                { "targets" : [1], "visible": true, "searchable": true, "type": "html" },
                { "targets" : [2], "visible": true, "searchable": true, "type": "html" },
                { "targets" : [3], "visible": true, "searchable": true, "type": "html" },
                { "targets" : [4], "visible": true, "searchable": true, "type": "html" },
                { "targets" : [5], "visible": true, "searchable": true, "type": "html" },
                { "targets" : [6], "visible": true, "searchable": true, "type": "html" },
                { "targets" : [7], "visible": true, "searchable": true, "type": "html" },
                { "targets" : [8], "visible": true, "searchable": true, "type": "html" },
                { "targets" : [9], "visible": true, "searchable": true },
                { "targets" : [10], "visible": true, "searchable": false, "sortable": false }
            ],
            "columns": [
                {"orderDataType": "dom-select"},
                {"orderDataType": "dom-select"},
                {"orderDataType": "dom-select"},
                {"orderDataType": "dom-text-numeric"},
                {"orderDataType": "dom-select"},
                {"orderDataType": "dom-select"},
                {"orderDataType": "dom-select"},
                {"orderDataType": "dom-text-numeric"},
                {"orderDataType": "dom-text-numeric"},
                {"orderDataType": "dom-checkbox"},
                {"orderDataType": "dom-checkbox"},
                {"orderDataType": "dom-text-numeric"}
            ],
            "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            "iDisplayLength": 50,   // Set default of 50 rows
            "bSort": false,
            "rowReorder": {
                dataSrc: 'order'
            },
            "dom": '<"header gradient-light-grey clearfix"lf>t<"footer gradient-light-grey clearfix"irp>',
            "createdRow": function(row, data, index){ //adds the row's filterID as the ID of the tr element
                jq(row).attr('id', data['filterID']);
                jq(row).attr('order', index);
            }
     });

I tried setting rowReorder to just true as indicated in docs and then I tried what you see above where I used the dataSrc property. Neither worked. The table loads fine and all of the rest of the behaviour is working as expected but the reordering reverts back as soon as you release the mouse and I can't figure out why.

allan

Can you link to a test page showing the issue please.

Allan

jgreen

Sorry I forgot about a test page. Totally slipped my mind. Here's a fiddle that I put together (https://jsfiddle.net/8ov8h6zp/). In the fiddle it also appears that when the row pops back to where it was that some of the cells are in the wrong row. When I try to switch those two rows it goes from ABC and DEF to AEF and DBC.

allan

I think what is probably confusing things here is that ordering is still enabled in the table - so the AAAAA will always be above DDDDD with the default sorting. The swap happens and then the table is redrawn with the ordering set.

Disabling the ordering and using dataSrc: 0 allows it to work as I would expect: https://jsfiddle.net/8ov8h6zp/1/ .

Allan

jgreen

I added ordering: false and the dataSrc change you noted and although the first column is now changing correctly the other columns are still getting mixed up.
https://jsfiddle.net/8ov8h6zp/2/

allan

Its using a data swap method - the data source form the source row replaces the target row's data. So dragging AAAAA down will cause the AAAAA and DDDDD to swap. This is how RowReorder is designed to operate. Simply being able to move the DOM object wouldn't be particularly useful in a table I don't think.

Allan

jgreen

So the extension doesn't allow for swapping entire rows? That's what I needed it to do

jgreen

Also I've noticed that you can't drag on any column that isn't the first one. Is that because that's the column where the index is defined?

allan

So the extension doesn't allow for swapping entire rows?

No - it does a data swap. If you need to simply rearrange the DOM elements then you might want to look at using jQuery UI sortable or similar (although keep in mind that the next draw will reset the table to the order that DataTables knows about).

Perhaps you could simply have a hidden counter column that would perform the data swap - that would give the appearance of what you want and retain all the functionality of DataTables.

Also I've noticed that you can't drag on any column that isn't the first one. Is that because that's the column where the index is defined?

Not, is't because that is the default configuration. Use rowReorder.selector to change that - example.

Allan