Can't redraw a table jQuery

问题

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

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>

is clicked:

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>

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

What am I doing wrong?

回答1:

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>fred@example.com</td></tr>

you could do something like:

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

Update:

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:

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

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

just render the data-id in your table by changing <tr> to

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

回答2:

Since the table is being updated on page refresh you can deduce that the back-end is being updated properly and it is an issue with the front-end. Since you have not said what you are using to display your data I'm going to assume it is datatables from a quick google search.

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

Has a similar issue with the method fnDraw() not properly redrawing the table. I suggest you use his example by changing your success handler to

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

Instead of your current solution and see if that works.

来源：https://stackoverflow.com/questions/25994404/cant-redraw-a-table-jquery