Update jQuery plugin to work with latest version of DataTables

Question

Looking for some assistance in getting this plugin http://code.google.com/p/jquery-datatables-row-reordering/ to work with the latest update (v.1.10.x) of jQuery DataTables. The plugin still drags and drops into a new sort order, however it's throwing an odd jQuery error and is not triggering the AJAX call to update the database.

<link rel="stylesheet" type="text/css" href="/css/dataTables.jqueryui.css" />

<script type="text/javascript" charset="utf8" src="/scripts/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="/Scripts/dataTables.jqueryui.js"></script>
<script type="text/javascript" charset="utf8" src="/Scripts/jquery.dataTables.rowReordering.js"></script>

<style type="text/css">
        #ethicsFAQsGrid select {
        width: auto;
    }
    .ui-dialog-content.ui-widget-content {
        padding: 10px 30px 10px 15px;
    }
</style>

<script type="text/javascript">
    $(function () {
        $('#ethicsFAQs').dataTable({
            "ajax": "/umbraco/surface/FAQsSurface/getFAQs",
            "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            "pagingType": "full_numbers",
            "order": [[1, 'asc']],
            "pageLength": 10,
            "orderClasses": true,
            stateSave: false,
            "paging": true,
            "autoWidth": false,
            "processing": true,
            "jQueryUI": true,
            "destroy": true,
            "deferRender": true,
            "columns": [
                {
                    "data": 0,
                    "visible": false
                },
                {
                    "data": 1,
                    "visible": false
                },
                {
                    "data": 2,
                    "sortable": false
                },
                {
                    "data": 3,
                    "sortable": false,
                    render: function (data, type, row, meta) {
                        if ( type === 'display' ) {
                            return '<input type="checkbox" class="editor-active">';
                        }
                        return data;
                    },
                    className: "dt-body-center"
                },
                {
                    "data": 0,
                    "sortable": false,
                    "class": "dt-center",
                    "render": function (data, type, row, meta) {
                        return "<a href=\"\" onclick=\"editFAQ(" + data + "); return false;\"><img src=\"/images/Edit_document.png\"/></a>";
                    }
                },
                {
                    "data": 0,
                    "sortable": false,
                    "class": "dt-center",
                    "render": function (data, type, row, meta) {
                    return "<a href=\"\" onclick=\"deleteOpinion(" + data + "); return false;\"><img src=\"/images/delete.png\"/></a>";
                    }
                }
            ],
            "rowCallback": function (row, data) {
                // Set the checked state of the checkbox in the table
                $('input.editor-active', row).prop('checked', data[3] == "True");
            }
        }).rowReordering({
            sURL: "/umbraco/surface/FAQsSurface/updateFAQsortOrder"
        });
    });
</script>

<div id="ethicsFAQsGrid">
    <table id="ethicsFAQs" cellpadding="0" cellspacing="0" border="0" class="display ca_highlight_row">
        <thead>
            <tr>
                <th>faqID</th>
                <th>sortOrder</th>
                <th>Question</th>
                <th>Active?</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

Answer 1

This is not quite a problem with 1.10.x, it is the nature of the plugin itself. It was actually the same with dataTables 1.9.x, see proof of concept -> http://jsfiddle.net/dycnnknz/

There are two reasons for that :

• rowReordering requires an unique id for each row, this is what is causing the unrecognized expression: # error.

• It also requires a column dedicated to indexes it is using to calculate internals and the oState object, i.e fromPosition, toPosition, direction. The is why the AJAX call fails, the operation is aborted because iNewPosition always is -1 or NaN.

Unfortunately those prerequisites are never documented or mentioned anywhere.

You can make a table "ready" for rowReordering by adding a <th></th> and add row id's and values for the index-column before initialising :

var count = $("#example tbody tr").length-1;
$("#example tbody tr").each(function(i, tr) {
    $(tr).attr('id', 'id'+i);
    $(tr).prepend('<td>'+parseInt(i+1)+'</td>');    
    if (i==count) {
       var table =$("#example")
          .dataTable()    
          .rowReordering({ sURL: "/umbraco/surface/FAQsSurface/updateFAQsortOrder" });
    }     
});  

demo -> http://jsfiddle.net/urcz6gL6/
Now it works without raising errors and goes through to the AJAX call. The demo raises an alert after dragging, this is of course because /umbraco/surface/FAQsSurface/updateFAQsortOrder not exists on jsfiddle.com.