jQuery DataTables rowReorder issue
<p>I am using DataTables along with the rowReorder plugin against a static table (non AJAX) - everything initialises fine but when I drag a row, whilst it moves within the table, when I drop it goes back to its original location without refreshing (i.e. it never actually moves location - am aware I will need to update via AJAX to get the move permanent but I need this to work first!)</p>

<p>I added this code to try and tell me what was happening:</p>

<pre><code>    table.on('row-reorder', function (e, diff, edit) {
        var result = 'Reorder started on row: '+edit.triggerRow.data()[1]+'&lt;br&gt;';

        for (var i=0, ien=diff.length ; i&lt;ien ; i++) {
            var rowData = table.row( diff[i].node ).data();

            result += rowData[1]+' updated to be in position '+
                diff[i].newData+' (was '+diff[i].oldData+')&lt;br&gt;';
        }

        $('#event-result').html('Event result:&lt;br&gt;'+result);
    }); 
</code></pre>

<p>and when I use this, in event-result, I get something like:</p>

<pre><code>Event result:
Reorder started on row: 3
4 updated to be in position (was )
5 updated to be in position (was )
3 updated to be in position (was )
</code></pre>

<p>The plugin can see that I am trying to move row 3 but it doesn't seem to be able to determine where I am trying to drop it hence the new and old position are blank whereas on <a href="https://datatables.net/extensions/rowreorder/examples/initialisation/events.html" rel="nofollow">https://datatables.net/extensions/rowreorder/examples/initialisation/events.html</a> you can see that it should "know" the location to drop and where to re order the 2 adjoining columns to.</p>

<p>In all the examples I have seen there are no id's added to the rows etc so I assuming this is being caused by a plugin clashing - anyone seen this before and know how to fix?</p>

<p>Here is my whole Datatables code:</p>

<pre><code>    $.extend( $.fn.dataTable.defaults, {
        autoWidth: false,
        dom: '&lt;"datatable-header"fBl&gt;&lt;"datatable-scroll-wrap"t&gt;&lt;"datatable-footer"ip&gt;',
        language: {
            search: '&lt;span&gt;&lt;/span&gt; _INPUT_',
            lengthMenu: '&lt;span&gt;&lt;/span&gt; _MENU_',
            paginate: { 'first': 'First', 'last': 'Last', 'next': '&amp;rarr;', 'previous': '&amp;larr;' }
        }
    });                     
   // Column selectors
    var table = $('.datatable-button-html5-columns').DataTable({
        //dom: 'lBfrtip',
        initComplete: function () {
            this.api().columns('.select-filter').every( function () {
                var column = this;
                var select = $('&lt;select class="form-control"&gt;&lt;option value=""&gt;&lt;/option&gt;&lt;/select&gt;')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '&lt;option value="'+d+'"&gt;'+d+'&lt;/option&gt;' )
                } );
            } );
        },
        colReorder: true,
        orderCellsTop: true,
        stateSave: true,
        pageLength: 10,
        order:[[ 1, "asc" ]],
        language: {
            url: "/assets/js/plugins/tables/datatables/lang/en.php"
        },          
        select: true,
        rowReorder: {
            selector: 'tr',
            update: true
        },          
        buttons: {            
            dom: {
                button: {
                    className: 'btn btn-default'
                }
            },
            buttons: [
                {
                    extend: 'colvis',
                    titleAttr: 'Columns'
                },
                {
                    extend: 'copyHtml5',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    extend: 'excelHtml5',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    extend: 'pdfHtml5',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    extend: 'print',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    text:      '&lt;span id="resetTable"&gt;Reset&lt;/span&gt;'
                }                   

            ]
        },
        responsive: {
            details: {
                type: 'column',
                target: 'tr'
            }
        },
        columnDefs: [
            {
                className: 'control',
                orderable: true,
                targets:   0
            }
        ]                           
    });

            // Setup event
    table.on('row-reorder', function (e, diff, edit) {
        var result = 'Reorder started on row: '+edit.triggerRow.data()[1]+'&lt;br&gt;';

        for (var i=0, ien=diff.length ; i&lt;ien ; i++) {
            var rowData = table.row( diff[i].node ).data();

            result += rowData[1]+' updated to be in position '+
                diff[i].newData+' (was '+diff[i].oldData+')&lt;br&gt;';
        }

        $('#event-result').html('Event result:&lt;br&gt;'+result);
    });
</code></pre>