JQuery DataTables 交换行答案

【问题标题】：JQuery DataTables Swapping RowsJQuery DataTables 交换行
【发布时间】：2021-02-11 17:18:18
【问题描述】：

我创建了一个函数来交换表中的行，但它似乎不能正常工作。行的数据似乎与数组中的数据不匹配。谁能帮助指出我的代码中的错误，或者我可能如何滥用某些 DataTable 函数？

function swapDataTableRows(selector, row1Index, row2Index)
{
    var datatable = selector.DataTable();
    var rows = datatable.rows().data();
    var row1Data = datatable.row(row1Index).data();
    var row2Data = datatable.row(row2Index).data();

    datatable.row(row1Index).data(row2Data);
    datatable.row(row2Index).data(row1Data);
}

swapDataTableRows(table, 2, 3) - 它将交换第 1 行和第 2 行。如果我将 1 添加到索引中，那么它会超出范围。

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

我不确定是否理解您的问题...

我尝试创建一个简单的演示来理解：

http://jsfiddle.net/q0zb1rkc/

...在您的函数中，您永远不会 draw 包含新（已编辑）数据的表：

我更改了你脚本的这 2 行：

datatable.row(row1Index).data(row2Data);
datatable.row(row2Index).data(row1Data);

我添加.draw():

datatable.row(row1Index).data(row2Data);
datatable.row(row2Index).data(row1Data);

width .draw() 也是 DOM 变化和 ROW1 和 ROW2 交换。

【讨论】：

为了更清楚，row(index) 返回了一个意外的行。
可以分享row2Data和row1Data的日志吗？
我发现了问题。我传入的索引基于显示的内容。它不是来自 api 的行索引。一旦我使用了api，它就解决了这个问题。函数是正确的。

【解决方案2】：

来自 Frogmouth 的回答，

`http://jsfiddle.net/bobxdr7c/`

我添加了一些更改。

由于在实例化 Datatable 时 ordering 选项默认设置为 true，每当您尝试交换他们的数据并重新绘制它时，它看起来都不是您所期望的。

为了解决这个问题，

检查您的“订购”选项设置为“假”。
不要调用draw()函数两次。在最后一个语句调用一次就足够了。

附：嗯，看来我不能直接在帖子中创建一个 jsfiddle 链接。 :(

【讨论】：

【解决方案3】：

如果这不是第一次切换行，您很可能使用了错误的行索引。 DOM 中显示的索引不一定是该行在 api 中的索引。您是否尝试过使用特定选择器（例如其 id）来寻址行？例如：datatable.row("#row1id")

对于要在 DOM 中更新的更改，您需要在所有数据切换完成后调用 datatable.draw()。

【讨论】：