jquery DataTables行重新排序:删除后恢复顺序

0ejtzxu1  于 2023-11-17  发布在  jQuery
关注(0)|答案(3)|浏览(197)

使用jQuery DataTables(http://datatables.net/)使用行排序插件(http://code.google.com/p/jquery-datatables-row-reordering/wiki/Index)。最初,行的重新排序看起来是可行的,但是有一个JavaScript错误“Error:callererror,unrecognized expression:#"。所以我实现了这里概述的解决方案:http://datatables.net/forums/discussion/19011/drag-and-drop-row-reordering-issue给tr元素唯一的id。现在没有JavaScript错误了。但是,行重新排序现在根本不起作用。我拖动一行,但是当我放下它时,表只是恢复到以前的状态。
下面是完整的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);

字符串
我已经迭代了oTable.fnGetData(tr,i)返回的几个i值,它似乎是该行的单元格。
我的猜测是DataTables的实现已经改变了,因为这个插件被写了。我只是想知道它是否可以轻松地修复这个问题。

cvxl0en2

cvxl0en21#

为了防止在删除后恢复,请使用“update:false”属性。

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

    "ajax": "someurl",

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

});

字符串

cgyqldqp

cgyqldqp2#

正如您在提供的wiki-link中所读到的,

  • 每个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和它需要的索引列(并隐藏它)。

oknwwptz

oknwwptz3#

我的修复有两个元素。首先,我需要一个代表订单的增量数字。在我的情况下,我将此作为第一列。不要使用id,因为插件将修改您的数据以重新编号此值,如果您想更新数据库以保存订单,这可能是一个问题。
其次,我将rowReorder属性定义为一个对象,并在其中添加了一个dataSrc属性,该属性的名称为提供顺序的数据属性。

const table = $('#my-table').dataTable({
    ajax: 'some-url',
    rowReorder: {
        selector: 'tr',
        dataSrc: 'order'
    },
    columns: [
        { data: 'order' },
        { data: 'description' },
    ]
});

字符串
现在,重新排序将保持不变,如果您想更新数据源,可以按当前顺序获取数据

table.api().rows({order: 'current'}).data().toArray()

相关问题