在数据表中向上和向下移动行

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

通过重绘你就不会遇到分页整个表发出