jquery - 在数据表中上下移动行

Question

现在，我可以选择行并上下移动它。这是事件监听器:

    $(".moveUpPlaylist").click(function () {
        moveSelected("up");
    });

    $(".moveDownPlaylist").click(function () {
        moveSelected("down");
    });

这是实际功能:

function moveSelected(direction){
        var arr = jQuery('#table_playlist tbody tr.row_selected');

        for(var i=0; i<arr.length; i++) {            
            var tr = arr[i];            
            var row = jQuery(tr);               // row to move.

            var prevRow;
        if(direction === "up")
            prevRow = jQuery(tr).prev();
        else
            prevRow = jQuery(tr).next();

        /* already at the top? */
        if(prevRow.length==0){  break; }    

        moveDataUp(row, prevRow);
        moveVisualSelectionUp(row, prevRow);
    }   
}   

/* the visual stuff that show which rows are selected */
function moveVisualSelectionUp(row, prevRow){
    row.removeClass("row_selected");
    prevRow.addClass("row_selected");
}

/* move the data in the internal datatable structure */
function moveDataUp(row, prevRow){      
    var movedData = _tablePL.fnGetData(row[0]).slice(0);    // copy of row to move.
    var prevData = _tablePL.fnGetData(prevRow[0]).slice(0); // copy of old data to be overwritten by above data.

    // switch data around :)
    _tablePL.fnUpdate(prevData , row[0], 0, false, false);  
    _tablePL.fnUpdate(movedData , prevRow[0], 0, true, true);
}    

所以问题出在我将行向下移动到页面底部时。它只能在表格的同一页内移动。如果它位于页面底部或顶部，我该如何使其能够跨页面移动？

Answer 1

我确信这对帖子的发起者来说已经不再有用，但也许对其他人也有用。我发现从表中提取数据、相应地更新数组并重新绘制表更容易。为了让这项工作适合我，我将索引设置为向上/向下按钮上的属性，以将它们绑定(bind)到特定行。

$(document).on('click', '.moveup', function(e){
    var index = $(this).attr('index');
    if ((index-1) >= 0) {
        var datatable = $('#datatable.table').dataTable()
        var data = datatable.fnGetData();
        datatable.fnClearTable();
        data.splice((index-1), 0, data.splice(index,1)[0]);
        datatable.fnAddData(data);
    }
});
$(document).on('click', '.movedown', function(e){
    var index = $(this).attr('index');
    if ((index+1) >= 0) {
        var datatable = $('#datatable.table').dataTable()
        var data = datatable.fnGetData();
        datatable.fnClearTable();
        data.splice((index+1), 0, data.splice(index,1)[0]);
        datatable.fnAddData(data);
    }
});

通过重新绘制整个表格，您不会遇到分页问题