不能重新绘制表格的jQuery

Question

所以，我有两个输入，在这里我输入名称和用户的电子邮件，我要去点击一个按钮

<input type="text" name="DeleteName" style="visibility:hidden"> 
<input type="text" name="DeleteEmail" style="visibility:hidden"> 
<button class="btn btn-mini btn-primary" type="button" name="delete_btn" style="visibility:hidden" onclick="DbDelete()">Delete</button> 

后，从数据库中删除，这是我表：

<table class="table table-bordered table-hover table-striped table-condensed" id="UserTable"> 
<tr> 
    <th>UserId</th> 
    <th>Name</th> 
    <th>Email</th> 
</tr> 
@foreach (var item in Model) { 
    <tr> 
     <td>@item.UserId</td> 
     <td>@item.Name</td> 
     <td>@item.Email</td> 
    </tr> 
} 

我可以输入两个unputs（包括姓名和电子邮件）或单一个。 这是我控制器从数据库中删除用户动作：

[HttpPost] 
    public ActionResult Delete(User userinfo) 
    { 
     const string noResult = "Search Result Not Found"; 
     using (var uc = new UserContext()) 
     { 
      if (userinfo.Name != null) 
      { 
       var itemforDelete = uc.UserList.SingleOrDefault(o => o.Name == userinfo.Name); 
       CommitChanges(itemforDelete, uc, noResult); 
       return new JsonResult { Data = itemforDelete }; 
      } 
      else 
      { 
       if (userinfo.Email != null) 
       { 
        var itemforDelete = uc.UserList.SingleOrDefault(o => o.Email == userinfo.Email); 
        CommitChanges(itemforDelete, uc, noResult); 
        return new JsonResult { Data = itemforDelete }; 
       } 
      } 
     } 
     return new JsonResult(); 
    } 

这是加载表视图控制器的方法。这个按钮

<a class="btn btn-large btn-primary" type="button" href="home/list">Show all users</a> 

被点击时，它被称为：

public ActionResult List() { 
     List<User> users; 
     using (var uc = new UserContext()) { 
      users = uc.UserList.ToList(); 
     } 
     return View(users); 
    } 

这是我的脚本：

<script type="text/javascript"> 
function DbDelete() { 
    // Get some values from elements on the page: 
    var deletedName = $("input[name='DeleteName']").val(), 
     deletedEmail = $("input[name='DeleteEmail']").val(); 

    var user = { Name: deletedName, Email: deletedEmail }; 

    $.ajax(
    { 
     type: "POST", 
     url: "Delete", 
     data: JSON.stringify({ userinfo: user }), 
     dataType: "json", 
     contentType: "application/json; charset=utf-8", 
     success: OnDeleteSuccess, 
     error: OnDeleteError 
    }); 
} 

function OnDeleteSuccess(data) 
{ 
    alert("success"); 
    //$('#UserTable').remove(data); 
    $("#UserTable").fnDraw(); 
} 
function OnDeleteError(data) { alert("error"); } 

</script> 

用户从数据库中删除，在成功处理程序阿勒特作品，但我的数据库在页面上没有更新，只有在按F5后。

我在做什么错？

Answer 1

目前代码中没有任何内容会导致页面发生任何可见的更改。您需要在OnDeleteSuccess中执行一些操作才能删除相关行。看起来你已经注意到这样做失败了。呈现的表格是否包含可以与返回的数据交叉引用的ID？举例来说，如果您的表行是这样的：

<tr data-id="123"><td>Fred</td><td>fred@example.com</td></tr> 

，你可以这样做：

$("'#UserTable').find('tr[data-id="' + data.UserId + '"]').remove(); 

更新：

如果你的表在第一列中的ID喜欢你的链接截图，您可以对其文本（）的值进行过滤，如下所示：

$('#UserTable tr').filter(function() { 
    return $(this).find('td:first').text() == data.UserId; 
}).hide(); 

或者这种方法可能可以更容易跟踪：

$('#UserTable tr').each(function() { 
    if($(this).find('td:first').text() == data.UserId) { 
     $(this).hide();  
    } 
}); 

进一步更新：

现在我们已经看到你的.cshtml，如果你想使用jQuery的第一个，即

$("'#UserTable').find('tr[data-id="' + data.UserId + '"]').remove(); 

只呈现在数据ID您的表格通过更改<tr>至

<tr data-id="@item.UserId"> 

Answer 2

由于表格在刷新页面时正在更新，因此可以推断出后端正在被正确更新，这是前端的问题。既然你没有说你用什么来显示你的数据，我会假设它是来自快速谷歌搜索的数据表。

stackoverflow.com/questions/20522440/fndraw-on-datatables-not-working

已与方法fnDraw（）没有正确重绘表类似的问题。我建议你使用他的例子，通过改变你的成功处理程序

function OnDeleteSuccess(data) 
{ 
    alert("success"); 
    $("#UserTable").fnUpdate('Example update', 0, 0); // Single cell. Will redraw by default 
} 

而不是你目前的解决方案，看看是否有效。