2015-05-11 125 views
2

我想用行排序插件(http://code.google.com/p/jquery-datatables-row-reordering/wiki/Index)使用jQuery DataTables(http://datatables.net/)。最初,行的重新排序看起來像它的工作,但有一個javascript錯誤「錯誤:語法錯誤,無法識別的表達式:#」。所以我實現了這裏概述的解決方案:http://datatables.net/forums/discussion/19011/drag-and-drop-row-reordering-issue給予tr元素唯一的id。現在沒有javascript錯誤。但是,行重新排序現在根本不起作用。我拖動一行,但是當我放下它時,表格會恢復到之前的狀態。jquery DataTables行重新排序:訂單回落後回退

下面是完整的HTML文件使用javascript: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)返回的值是幾個值,它似乎是該行的單元格。

我的猜測是DataTables的實現在該插件寫入後發生了變化。我只是想知道是否容易解決這個問題。

回答

2

正如你可以在你所提供的wiki-link讀,

  • Each TR element must have id attribute.
  • One column in the table should be indexing column. This column will be used for determining position of the row in the table. By default this is first column in the table. You can see structure of the table on the live example page.

的 「無法識別的表達式:#」 是與第一需求;你無法移動的行與第二個有關。您只是缺少一個索引列。正如你已經與失蹤<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/

通知演示上面正在運行數據表1.10 。X。這個問題與dataTables版本或dataTables內部的一些更改無關,只是簡單介紹瞭如何創建RowReordering插件。如果你問我,這不是很優雅。該插件應該創建id和它自己需要的索引列(並使其隱藏)。