无法在jQuery数据表的中间添加行（带有FIDDLE）

Question

我正在尝试使用DataTables API中的rows.add()函数将新行添加到表中。 数据来自使用AJAX调用的服务器。

这是一个工作示例-FIDDLE

我的表结构如下：

    <table id="myTable">
        <thead>
            <th>
                Id
            </th>
            <th>
                Name
            </th>
            <th>
                Designation
            </th>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @item.Number
                    </td>
                    <td>
                        @item.Name
                        <img id="imgA" onclick="AddNewRows();" class="iterationChild" src="@Url.Content("~/Images/plus.png")" alt="expand/collapse" />
                    </td>
                    <td>
                        @item.Designation
                    </td>
                </tr>
            }
        </tbody>
    </table>

对应的Javascript函数：

function AddNewRows() {
    $.ajax({
        type: 'GET',
        url: '@Url.Action("NewRows", "Home")',
        dataType: "json",
        async: true,
        success: function (data) {
            var table = $('#myTable').DataTable();

            for (var i = 0, l = data.length; i < l; i++) {
            //how to add it just after the current row clicked
              table.row.add([
                   data[i].Number,
                   data[i].Name,
                   data[i].Designation
              ]).draw();
            }
        },
        error: function (result) {
            alert('error');
        }
    });
}

我希望能够在单击的行之后添加新行。 它在表末尾添加（最后几行）。

Answer 1

假设每一行都是唯一的ID，请尝试将当前单击的行ID作为参数传递给函数。 示例：函数AddNewRows（id）{var my_row = document.getElementById（id）; ...