更新 jQuery 插件以使用最新版本的 DataTables

Question

寻求帮助以使此插件http://code.google.com/p/jquery-datatables-row-reordering/ 与 jQuery DataTables 的最新更新 (v.1.10.x) 一起使用。该插件仍然可以拖放到新的排序顺序中，但是它会抛出一个奇怪的 jQuery 错误，并且不会触发 AJAX 调用来更新数据库。

<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

这不是 1.10.x 的问题，这是插件本身的特性。实际上与 dataTables 1.9.x 相同，请参阅概念证明 -> http://jsfiddle.net/dycnnknz/

有两个原因：

• rowReordering 要求每一行都有一个唯一的id，这就是导致 unrecognized expression: # 错误的原因。

• 它还需要一个专用于用于计算内部的索引的列和oState 对象，即fromPosition、toPosition、direction。这就是 AJAX 调用失败的原因，操作被中止，因为iNewPosition 始终是-1 或NaN。

不幸的是，这些先决条件从未在任何地方记录或提及。

您可以通过添加<th></th> 并在初始化之前为索引列添加行id 和值来使表“准备好”进行行重新排序：

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" });
    }     
});  

演示 -> http://jsfiddle.net/urcz6gL6/
现在它可以正常工作而不会引发错误并通过 AJAX 调用。 Demo拖拽后会出现alert，这当然是因为jsfiddle.com上不存在/umbraco/surface/FAQsSurface/updateFAQsortOrder。