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

我确信这对帖子的发起人来说过去是有用的，但也许对其他人有用。我发现从表中提取数据更容易，相应地更新数组并重绘表格。为了让我能够工作，我将索引设置为向上/向下按钮的属性，将它们绑定到特定行。

$(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);
    }
});

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

在DataTables中上下移动行

1 个答案: