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相同，请参阅概念验证 - ＆gt;的 http://jsfiddle.net/dycnnknz/

有两个原因：

rowReordering每行需要一个唯一的id，这是导致无法识别的表达式的原因：＃错误。

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

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

您可以通过在初始化之前添加<th></th>并为index-column添加行id和值来为rowReordering“准备好”表格：

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

演示 - ＆gt;的 http://jsfiddle.net/urcz6gL6/
现在它可以在不引发错误的情况下工作并进入AJAX调用。该示例在拖动后发出警报，这当然是因为jsfiddle.com上不存在/umbraco/surface/FAQsSurface/updateFAQsortOrder。

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

1 个答案: