jquery - 更新 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/

有两个原因:

• 行重新排序需要唯一的 id对于每一行，这就是导致 无法识别的表达式:# 错误的原因。

• 它还需要一个专用于用于计算内部结构和 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 调用。演示在拖动后发出警报，这当然是因为/umbraco/surface/FAQsSurface/updateFAQsortOrder jsfiddle.com 上不存在。