在数据表中向上和向下移动行
问题描述:
因此,现在可以选择行并上下移动行。这里是事件侦听器:在数据表中向上和向下移动行
$(".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);
}
所以,当我移动行到页面底部的问题所在。它只能在表格的同一页面内移动。我该如何做到这一点,如果它位于页面的底部或顶部,它将跨页面移动?
答
我确定这已经过去对帖子创作者有用,但也许对别人有用。我发现将数据拉出表格更容易,相应地更新数组并重新绘制表格。为了让我有这个工作,我将索引设置为上/下按钮上的一个属性,以将它们绑定到特定行。
$(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);
}
});
通过重绘你就不会遇到分页整个表发出
喂......你能请把你的HTML代码!这将是伟大的帮助:) – 2018-02-13 05:27:41