Question

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

目前，我可以第一次添加该行。但从第二次开始，它的表现有点奇怪。我能够为你们中的任何一个创建这个例子。

经过一天的大量工作，这就是我能做到的。

EXAMPLE TO WORK UPON

Answer 1

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

AddNewRows()函数由onclick的html中的td事件调用（但不适用于所有行？）。这也意味着对新添加的行不起作用。
在AddNewRows()函数中，您使用了很多$('#example').DataTable()而不是（重新）使用变量table。
在对AddNewRows()的每次新调用中，向表的所有行添加jQuery click事件（在添加新行之前，因此事件不会绑定到新行）。在例如第五次调用该函数所有行都绑定了五个事件，因此有两次五次警报......
在AddNewRows上使用onclick事件调用td函数，在函数完成后，click事件将传播到tr并且新绑定的事件将传递给tr立即调用tr（加上之前调用的所有事件，请参阅上一点）。为什么不只使用一个活动？此外，td上新添加的活动也适用于点击其他AddNewRows()，然后是原来的moment(new Date("01/05/2015")).format("YYYY-DD-MM")来电。

尝试简化您的代码，甚至可以从头开始构建代码，以便它只执行应该执行的操作。在那之后，如果你还有问题，请回到这里。

Answer 2

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

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

这里唯一的问题是row.add()只能追加一行（即不能插入任意位置）。要解决此问题，您可以检索内部表数据，修改它并将其重新放回。 E.g。

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中动态添加多行（使用FIDDLE）

2 个答案: