Question

我正在尝试使用rows.add() API中的DataTables函数向表中添加新行。数据来自服务器，使用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，请尝试将当前行的clicked id作为参数传递给您的函数。例： function AddNewRows（id）{ var my_row = document.getElementById（id）; ...

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

1 个答案: