Javascript 在webgrid中添加有分页问题的表行？

我正在尝试向MVC3 WebGrid添加一行，并使用JQuery启用分页

当我添加新行时，它会作为最后一行正确插入，但是当我的WebGrid中有超过1个页面时，问题就会出现

要插入最后一个WebGrid页面最后一行的新行将插入第一个WebGrid页面

Javascript代码：

$("#add-category-dialog").dialog({
        resizable: false,
        height: 300,
        modal: true,
        autoOpen: false,
        open: function (event, ui) {
            var objectid = 0;
            $('#add-category-dialog').load("/Categories/CreateEditPartial", { id: objectid });
        },
        buttons: {
            "Save": function () {
                var ai = {
                    categoryID: $(this).data('id'),
                    Name: $("#Name").val()
                };
                var json = $.toJSON(ai);

                $.ajax({
                    url: $(this).data('url'),
                    type: 'POST',
                    dataType: 'json',
                    data: json,
                    contentType: 'application/json; charset=utf-8',
                    success: function (data) {
                        $('.pretty-table tr:last').after('<tr><td>....</td></tr>');
                    },
                    error: function (data) {
                        var data = data;
                        alert("Error");
                    }
                });
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });

$("#add-category-btn").live("click", function () {
    var url = $(this).attr('controller');

    $("#add-category-dialog")
        .data('url', url)
        .dialog('open');

    event.stopPropagation();
    return true;

});

视图：

var-grid=new-WebGrid（模型，ajaxUpdateContainerId：“类别网格”，canPage:true，rowsPerPage:30）；
@grid.GetHtml(
表样式：“漂亮的表”，
headerStyle：“ui小部件头”，
列：grid.columns(
grid.Column（“CategoryID”、“Id”，canSort:true，格式：@@item.CategoryID），
grid.Column（“Name”，“Name”，canSort:true，格式：@@item.Name）
)
)

在下一行中，您将添加新行作为当前页面的最后一行

$('.pretty-table tr:last').after('<tr><td>....</td></tr>');

$（'.pretty table tr:last'）。在（'..'）之后；

具有分页功能的WebGrid仅显示特定页面的行。因此，生成的最终html（table>tr）将仅用于该特定页面。因此，上面的jQuery行查找生成的html中的最后一行，并在其后插入行。在你的情况下，可能是第一页。尝试导航到最后一页（或第一页和最后一页之间的任何一页），然后添加新行，看看是否是这样

控制器代码看起来很好，因此您不应该在ajax调用成功时执行任何操作。注释上面的行并测试代码。添加新行并导航到最后一页。您的新行应该显示在那里

var grid = new WebGrid(Model, ajaxUpdateContainerId: "category-grid", canPage: true, rowsPerPage: 30);

@grid.GetHtml(
        tableStyle: "pretty-table",
        headerStyle: "ui-widget-header",
        columns: grid.Columns(
        grid.Column("CategoryID", "Id", canSort: true, format: @<b>@item.CategoryID</b>),
        grid.Column("Name", "Name", canSort: true, format: @<b>@item.Name</b>)
        )
    )

$('.pretty-table tr:last').after('<tr><td>....</td></tr>');