不能重新绘制表格的jQuery [英] Can't redraw a table jQuery

问题描述

所以，我有两个输入，在这里我输入姓名和电子邮件用户，那我会从DB点击一个按钮后，删除

So, I have two inputs, where I enter Name and Email of User, that I'm going to Delete from DB after clicking a button

<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>

这是我的表：

And this is my table:

<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（包括姓名和电子邮件）或单之一。 这是我的控制器的动作从数据库中删除用户：

I can enter two unputs (both Name and Email) or single one. this is my controller's action for deleting the user from DB:

[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();
    }

这是控制器的方法加载该表来查看。这就是所谓的当此按钮

This is method of controller that loads the table to view. It's called when this button

<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);
    }

这是我的脚本：

And this is my script:

<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>

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

The user is deleted from DB, in success-handler allert works, but my DB at the page is not updating, only after pressing F5.

我是什么做错了吗？

推荐答案

有没有在你的code此刻造成任何明显的改变页面。你需要做一些OnDeleteSuccess删除相关行。它看起来像你注释掉一个失败的尝试这样做。是否呈现表包含一个ID，你可以交叉参考返回的数据？举例来说，如果你的表中的行是这样的：

There's nothing in your code at the moment to cause any visible changes to the page. You'll need to do something in OnDeleteSuccess to remove the relevant row. It looks like you've commented out a failed attempt to do so. Does the rendered table contain an ID you can cross reference with the returned data? For instance if your table rows looked like this:

<tr data-id="123"><td>Fred</td><td>[e-mail]</td></tr>

你可以这样做：

you could do something like:

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

更新：

如果您的表有喜欢你的链接截图的第一列的ID，你可以过滤的它的文本（）值是这样的：

If your table has the ID in the first column like your linked screenshot, you could filter on the its text() value like this:

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

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

or this approach might be easier to follow:

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

进一步更新：

Further update:

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

Having now seen your .cshtml, if you want to use the first jQuery, i.e.

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

只是呈现数据-ID在你的餐桌，通过改变＆LT; TR＆GT; 到

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

这篇关于不能重新绘制表格的jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！