在 jQuery DataTables(with FIDDLE) 中动态添加多行

Question

我正在尝试使用 DataTables API 在单元格单击时添加新行。

目前，我是第一次添加行。但是从第二次开始，它的行为有点奇怪。我能够为你们中的任何人创建这个示例来试一试。

经过一整天的努力，这就是我能完成的。

EXAMPLE TO WORK UPON

Answer 1

你的代码有点乱。以下是一些问题：

AddNewRows() 函数由 td 的 html 中的 onclick 事件调用（但不是对所有行？）。这也意味着不适用于新添加的行。
在 AddNewRows() 函数中，您使用了很多 $('#example').DataTable() 而不是（重新）使用变量 table.
在对 AddNewRows() 的每次新调用中，您将 jQuery click 事件添加到 table 的所有行（在添加新行之前，因此事件是不绑定到新行）。在例如之后第五次调用该函数所有行都绑定了五个事件，因此有两次五次警报...
使用 td 上的 onclick 事件调用 AddNewRows 函数，函数完成后，点击事件传播到 tr 和新绑定的事件因为 tr 被立即调用（加上之前调用的所有事件，请参见上一点）。为什么不只使用一个事件？此外，tr 上新添加的事件也适用于点击其他 td，然后是最初调用 AddNewRows().

尝试简化您的代码，甚至可能从头开始构建它，以便它只做它应该做的事情。之后，如果还有问题，请返回这里。

Answer 2

考虑到 Datatables 无论如何都在内部执行此操作，手动执行索引并不是最好的主意。

这是索引列的官方操作方法：https://datatables.net/examples/api/counter_columns.html

这里唯一的问题是 row.add() 只能 append 一行（即不能插入到任意位置）。为了克服这个问题，您可以检索内部 table 数据，修改它并再次放回去。例如

var newRowData = [
    "",
    'New Name',
    'New Position',
    'New Office',
    26,
    'New Date',
    'New Salary'];

tableApi.row.add(newRowData);

var data = datatable.fnGetData(); // get data
datatable.fnClearTable(false); // erase the data in the table

data.splice(currentRowIndex + 1, 0, data.pop());  // move the row of interest into desired position

datatable.fnAddData(data); // put data back

完整示例：JSFiddle

在 jQuery DataTables(with FIDDLE) 中动态添加多行

Add multiple rows dynamically in jQuery DataTables(with FIDDLE)

javascript

jquery

jquery-datatables