如何在DataTable中向上或向下移动一行？

我正在使用JavaScript库DataTables来显示数据。如何在DataTable中向上或向下移动一行？

我希望能够对行重新排序。我看到有一个名为RowReorder的扩展名，但它看起来很糟糕，因为即使在线发现的示例也不会对行重新排序（至少在本文撰写时最新版本的Chrome中）。即使它工作，我也不喜欢这个解决方案，因为不清楚你可以重新排列行。

所以我想实现像下面的图片的东西：

我发现了几个链接在网上要求这一点，但似乎没有人能使其正常工作。

我的数据源是一个简单的数组。没有ajax呢。我想从简单开始。

你之前做过的事情是？关于如何开始构建该功能的任何方向？

2016-12-15 Maxime

你必须做你自己的编码。这里是一个例子 - > http：// stackoverflow。com/questions/30712227/datatables-row-add-to-specific-index/30782115＃30782115它不完全相同，它在特定位置插入一行，但应该使用相同的技术将行向上或向下移动。 – davidkonrad

谢谢！当我接近解决方案时，我会查看并更新问题。 – Maxime

@davidkonrad我设法让它在您的答案中得到灵感。我对该答案做了+1，以表示感谢。问题解决了。 :-) – Maxime

谢谢大卫·康拉德，他从他的answer on another question如何在一个表的中间添加行指导。

我做的第一件事是从我的表中创建一个Action列开始，并动态添加Up或Down选项。

{ 
    name: 'action', 
    data: null, 
    title: 'Action', 
    searchable: false, 
    sortable: false, 
    render: function (data, type, full, meta) { 
     if (type === 'display') { 
      var $span = $('<span></span>'); 

      if (meta.row > 0) { 
       $('<a class="dtMoveUp">Up</a>').appendTo($span); 
      } 

      $('<a class="dtMoveDown">Down</a>').appendTo($span); 

      return $span.html(); 
     } 
     return data; 
    } 
}

然后，我在drawCallback添加的代码删除最后一排的Down箭头，单击事件绑定到moveUp和moveDown功能：

'drawCallback': function (settings) { 
    $('#ArgumentsTable tr:last .dtMoveDown').remove(); 

    // Remove previous binding before adding it 
    $('.dtMoveUp').unbind('click'); 
    $('.dtMoveDown').unbind('click'); 

    // Bind click to function 
    $('.dtMoveUp').click(moveUp); 
    $('.dtMoveDown').click(moveDown); 
}

然后我编写的向上/向下移动功能。请注意，我的数据有一个order属性，用于更改订单，这一点非常重要。这order显示为第一列，并使其成为默认的排序列：

// Move the row up 
function moveUp() { 
    var tr = $(this).parents('tr'); 
    moveRow(tr, 'up'); 
} 

// Move the row down 
function moveDown() { 
    var tr = $(this).parents('tr'); 
    moveRow(tr, 'down'); 
} 

// Move up or down (depending...) 
function moveRow(row, direction) { 
    var index = table.row(row).index(); 

    var order = -1; 
    if (direction === 'down') { 
     order = 1; 
    } 

    var data1 = table.row(index).data(); 
    data1.order += order; 

    var data2 = table.row(index + order).data(); 
    data2.order += -order; 

    table.row(index).data(data2); 
    table.row(index + order).data(data1); 

    table.page(0).draw(false); 
}

注意：要明白，当你问的DataTable到draw()你的表再次，它会使用你的数据进行排序是非常重要的结果根据DataTable定义中设置的参数。这就是为什么我选择order作为第一列（默认排序）并直接更改我的数据对象（而不是使用DataTable中的内部信息播放）的原因。这使事情变得更容易。

注2：这是真的重要您的数据是由已经被order排序的数据表接收。否则，该解决方案将无法按原样工作。

你可以在这里查看完整的工作示例：

https://jsfiddle.net/kxfx489y/4/

来源

2016-12-15 16:40:44 Maxime

如何在DataTable中向上或向下移动一行？

回答

相关问题