不能重新繪製表格的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 
} 

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