更新 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> 为 rowReordering 创建 table "ready"，并在初始化之前为索引列添加行 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 调用。该演示在拖动后引发警报，这当然是因为 /umbraco/surface/FAQsSurface/updateFAQsortOrder 在 jsfiddle.com.

上不存在

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

Update jQuery plugin to work with latest version of DataTables

jquery

datatables

jquery-datatables