jquery DataTables 行重新排序：删除后订单恢复

Question

我正在尝试将 jQuery DataTables ( http://datatables.net/ ) 与 Row Ordering 插件 ( http://code.google.com/p/jquery-datatables-row-reordering/wiki/Index ) 一起使用。最初，行的重新排序看起来有效，但是出现了 javascript 错误“错误：语法错误，无法识别的表达式：#”。因此，我实施了此处概述的解决方案：http : //datatables.net/forums/discussion/19011/drag-and-drop-row-reordering-issue 为 tr 元素提供唯一 ID。现在没有javascript错误。但是，行重新排序现在根本不起作用。我拖了一行，但是当我放下它时，表格会恢复到以前的状态。

这是带有 javascript 的完整 HTML 文件：http : //pastebin.com/2P9hJ7n2

有没有其他人遇到过这个问题？如果是这样，你是如何解决的？

我尝试在重新排序 javascript 的行中挖掘，看起来问题是抓取行的当前和上一个位置：

// fyi: properties.iIndexColumn is 0
var iCurrentPosition = oTable.fnGetData(tr, properties.iIndexColumn);
//...
oTable.fnGetData(trPrevious[0], properties.iIndexColumn);

无论它期望从 fnGetData 得到什么，都已经改变了。我已经迭代了 oTable.fnGetData(tr, i) 为 i 的几个值返回的内容，它似乎是该行的单元格。

我的猜测是自从编写这个插件以来 DataTables 的实现已经发生了变化。我只是想知道是否可以轻松解决这个问题。

Answer 1

To prevent revert back after drop use "update: false" attribute.

var table = $('#categories').DataTable( {

    "ajax": "someurl",

    "rowReorder": {
        selector: 'tr',
        update: false,
    },

});

Answer 2

正如您可以在您提供的维基链接中阅读的那样，

• 每个TR元素必须有id属性。
• 表中的一列应该是索引列。该列将用于确定行在表中的位置。默认情况下，这是表中的第一列。您可以在实时示例页面上查看表的结构。

“无法识别的表达式：# ”与第一个需求有关；您无法移动行与第二个有关。您只是缺少索引列。正如您已经发现缺少的<tr>#id，您可以轻松地以编程方式创建该列：

$("#mySuperTable thead tr").prepend('<th>#</td>');    
var count = $("#mySuperTable tbody tr").length-1;
$("#mySuperTable tbody tr").each(function(i, tr) {
    $(tr).attr('id', 'id'+i);
    $(tr).prepend('<td>'+parseInt(i+1)+'</td>');    
    if (i==count) {
       $("#mySuperTable").dataTable({
           //...initialization options
       }).rowReordering();
    }     
});  

现在 RowReordering 适用于您的表 -> http://jsfiddle.net/gy8s3hoa/

请注意，上面的演示正在运行 dataTables 1.10.x。该问题与 dataTables 版本或 dataTables 内部的某些更改无关，它只是与 RowReordering 插件的创建方式有关。如果你问我的话，它不是很优雅。该插件应该自行创建id它需要的 和索引列（并使其隐藏）。