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

【问题标题】：How to move a row up or down in a DataTable?如何在 DataTable 中向上或向下移动一行？
【发布时间】：2016-12-15 14:03:25
【问题描述】：

我正在使用 JavaScript 库 DataTables 来显示数据。

我希望能够对行重新排序。我看到有一个名为RowReorder 的扩展程序，但它似乎已损坏，因为即使在网上找到的示例也没有重新排序行（至少在撰写本文时最新版本的 Chrome 中）。即使它有效，我也不喜欢这个解决方案，因为不清楚是否可以重新排序行。

所以我想实现如下图所示：

我在网上找到了几个链接要求，但似乎没有人可以使其正常工作。

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

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

【问题讨论】：

您必须自己进行编码。这是一个示例 -> stackoverflow.com/questions/30712227/… 它并不完全相同，它是在特定位置插入一行，但您应该使用相同的技术来向上或向下移动行。
谢谢！当我接近解决方案时，我会查看并更新问题。
@davidkonrad 我设法使它与受您回答启发的代码一起工作。我对该答案进行了+1，以感谢您。问题解决了。 :-)

标签： javascript jquery datatables

【解决方案1】：

感谢 David Konrad 在他的 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 排序的 DataTable 接收。否则，此解决方案将无法正常工作。

您可以在此处查看完整的工作示例：

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

【讨论】：