如何在客户端更新DataTables表格（无需页面刷新）

我在cshtml文件里用DataTables渲染了一个客户端加载的表格，现在通过POST请求完成行的添加、删除并保存到数据库后，必须刷新页面才能看到变更。想实现无需刷新页面，表格就能实时反映这些更改。另外说明下，表格部分TD元素带有用于POST删除数据的onclick属性。请问能不能通过DataTable API实现客户端更新，还是需要做服务端配置？

相关代码 #

HTML表格代码 #

<table id="admin-users-table" class="table">
    @{
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.TMUser.DisplayName)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.TMUser.GivenName)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.TMUser.Surname)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.TMUser.CompanyName)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.TMUser.AccessLevel)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.TMUser.AccessScope)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.TMUser.PrismUser)
                </th>
                <th>
                    Remove
                </th>
            </tr>
        </thead>
        <tbody id="table-body-admin-users">
            @foreach (var member in Model.CurrentGroupMembers)
            {
                <!-- 新增data-user-id属性，方便后续定位行 -->
                <tr data-user-id="@member.Id">
                    <td>
                        @Html.DisplayFor(modelItem => member.DisplayName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => member.GivenName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => member.Surname)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => member.CompanyName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => member.AccessLevel)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => member.AccessScope)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => member.PrismUser)
                    </td>
                    <td>
                        <button type="button" class="btn btn-secondary delete-user-icon" onclick="RemoveFromGroup('@member.Id','@Model.TMGroup.Id','@member.GivenName','@member.Surname', '@Model.GroupName')">remove</button>
                    </td>
                </tr>
            }
        </tbody>
    }
</table>

添加行的JS函数 #

// 先初始化DataTables并保存全局实例
const table = $('#admin-users-table').DataTable();

function AddToGroup(groupId, groupName) {
  $("#confirm-add-group").modal('show');
  //post to controller and save to db.
  $.post('/Home/AddToGroup', { userIdList: userIds, groupId: groupId, groupName:groupName }, function(response) {
    // 假设后端返回新增用户的数组，每个用户包含DisplayName、GivenName等字段
    response.forEach(user => {
      // 用DataTables API添加新行
      table.row.add([
        user.DisplayName,
        user.GivenName,
        user.Surname,
        user.CompanyName,
        user.AccessLevel,
        user.AccessScope,
        user.PrismUser,
        `<button type="button" class="btn btn-secondary delete-user-icon" onclick="RemoveFromGroup('${user.Id}','${groupId}','${user.GivenName}','${user.Surname}', '${groupName}')">remove</button>`
      ]).draw(false); // draw(false)保持当前分页位置
    });
    $("#confirm-add-group").modal('hide');
  });
}

删除行的JS函数 #

function RemoveFromGroup(userId, groupId, fName, lName, groupName) {
  // 避免重复绑定事件，用.one()确保只触发一次
  $(".confirm-delete").one('click', function () {
    $.post('/Home/RemoveFromGroup', { userId: userId, groupId: groupId }, function() {
      // 通过data-user-id定位行并删除
      table.row(`[data-user-id="${userId}"]`).remove().draw(false);
      $("#confirm-delete-modal").modal('hide'); // 关闭确认模态框
    });
  });
  $("#confirm-delete-modal").modal('show'); // 打开确认模态框
}

完全可以通过DataTables客户端API实现实时更新，不需要额外的服务端配置（你的场景是客户端加载表格，服务端仅处理增删接口即可）。核心思路是：

• 保存DataTables实例：初始化表格时把实例存为全局变量，方便后续调用API操作行。
• 删除行：在POST请求成功的回调里，通过唯一标识（比如新增的data-user-id属性）定位到目标行，用row().remove().draw()删除并刷新表格。
• 添加行：在添加接口的成功回调里，获取新增用户的完整数据（建议后端返回新增用户的详细信息），用row.add().draw()插入新行，draw(false)参数可以保持当前分页位置，避免跳回第一页。

另外注意优化点：

• 给每行添加唯一标识属性（比如data-user-id），避免通过内容定位行的误差。
• 删除函数里的点击事件用.one()绑定，防止重复绑定导致多次触发删除请求。

内容的提问来源于stack exchange，提问作者Tim Whatley