Javascript 剑道网格显示第二页上所有剩余的项目

我继承了一个网页，上面有一个剑道网格，显示一些数据。网格设置为支持分页的客户端，具有不同的可用页面大小。半消毒代码如下：

self.loadGrid = function (someId, anotherId, pager) {
    var pageSizeActive = 20;
    var pageNumberActive = 1;

    var grid = $("#MyItemGrid").data("kendoGrid");
    if (grid) {
        //apply pager values
        var pagerValue = $('.k-pager-sizes').find('.k-input').html();
        if (pagerValue) {
            //persist selecter page size
            pageSizeActive = pagerValue;
        }
        //selected page number
        if (pager) {
            //edit and delete stay on same page number
            pageNumberActive = grid.dataSource.page();
        }
    }

    var columnList = null;
    gridDataSource = {
        transport: {
            read: function (options) {
                var list = new lookupList(someId, anotherId);
                list.get(options.success, options.error);
            }
        },
        schema: {
            model: {
                id: "ItemId",
                fields: {
                    ItemId: { typ: "int", editable: false, nullable: true },
                    Author: { type: "string", validation: { required: false } }
                }
            }
        },
        page: pageNumberActive,
        pageSize: pageSizeActive,
        serverPaging: false,
        serverFiltering: true,
        serverSorting: true,
        error: function (e) {
            console.log(e);
        },
        change: function (e) {
            console.log(e);
        },
    };

    columnList = [
        {
            field: "check_item", title: "<input type='checkbox' id='chkItemsSelectAll' onclick='SelectItemAll();'/>",
            template: "<input type='checkbox' id='noteChk' onclick='chkOrUnchkCompleteItem(this)'/>",
            width: '30px', sortable: false, filterable: false
        },
        {
            field: "critical_item", title: " ",
                template: "<a href='javascript:;' onclick='ChangeItemStatus(#=MainId()#,#=ItemId()#);'><span class='" + ViewModel.itemImageCritical() + " k-grid-cell-critical-off' aria-hidden='true'><span></a>",
            width: '24px', height: '20px', sortable: false, filterable: false
        },
        { field: "ItemDate()", title: "Date/Time", type: "date", format: "{0:dd/MM/yyyy hh:mmsstt}", width: "160px", template: '#=StyleDateTime(ItemDate())#', sortable: false, filterable: false },
        {
            field: "manual_item", title: " ",
            template: "<span class='" + ViewModel.itemImageManual() + " k-grid-cell-manual-off' aria-hidden='true' title='date was manually entered'><span>",
            width: '24px', height: '20px', sortable: false, filterable: false
        },
        { field: "Author", title: "Author", width: "200px", sortable: false, filterable: false },
        {
            field: "subject_item", title: "Item",
            template: "<span>" + '#if(Subject() == null) {##}else{# #=Subject()#' + '<br/>' + ' # }#' + "#=ItemView()#" + "<span>",
            width: '100%', sortable: false, filterable: false
        },
        {
            command: [
                {
                    name: "Edit",
                    click: function (e) {
                        var record = this.dataItem($(e.currentTarget).closest("tr"));
                        var myItem = record;
                        _item = myItem;
                        if (_item != null) {
                            if (_item.canComplete()) {
                                $('#btnComplete').prop('disabled', false);
                            }
                            else {
                                $('#btnComplete').prop('disabled', true);
                            }
                        }

                        kendo.bind($("#WindowCreateItem"), myItem);

                        $('#btnDelete').prop('disabled', false);
                        var win = $("#WindowCreateEditItem").data("kendoWindow");
                        win.center();
                        win.open();

                        $("#divErrItem").hide();
                        $("#NewItemName").removeClass('sp-error');
                    }
                }
            ],
            title: "&nbsp;",
            width: "100px"
        }
    ];

    if (grid != null) {
        grid.destroy();
        grid.wrapper.empty();
    }

    $("#MyItemGrid").kendoGrid({
        dataSource: gridDataSource,
        change: function (e) {
            syncCheckBoxes();
        },
        //height: 455,
        scrollable: true,
        sortable: true,
        selectable: "multiple, row",
        filterable: true,
        pageable: {
            pageSizes: [20, 60, 100]
        },
        editable: false,
        dataBound: function (e) {
            itemApplyStyling(e);
            CheckCanEditItem(e);
        },
        columns: columnList
    });
};

self.loadGrid=function（someId、anotherId、pager）{
var pageSizeActive=20；
var PageNumberRactive=1；
var grid=$（“#MyItemGrid”）.data（“kendoGrid”）；
如果（网格）{
//应用寻呼机值
var pagerValue=$（'.k-pager-size'）.find（'.k-input'）.html（）；
如果（页面值）{
//持久化选择器页面大小
pageSizeActive=pagerValue；
}
//所选页码
如果（寻呼机）{
//编辑和删除保持在同一页码上
pageNumberActive=grid.dataSource.page（）；
}
}
var columnList=null；
gridDataSource={
运输：{
阅读：功能（选项）{
var list=新的lookupList（someId，anotherId）；
list.get（options.success、options.error）；
}
},
模式：{
型号：{
id:“项目id”，
字段：{
ItemId:{typ:“int”，可编辑：false，可空：true}，
作者：{type:“string”，验证：{required:false}
}
}
},
页码：PageNumberRactive，
pageSize:pageSizeActive，
服务器分页：false，
是的，
对,，
错误：函数（e）{
控制台日志（e）；
},
更改：功能（e）{
控制台日志（e）；
},
};
列列表=[
{
字段：“检查项目”，标题：“”，
模板：“”，
宽度：“30px”，可排序：false，可筛选：false
},
{
字段：“关键项目”，标题：“”，
模板：“”，
宽度：“24px”，高度：“20px”，可排序：false，可过滤：false
},
{字段：“ItemDate（）”，标题：“日期/时间”，类型：“日期”，格式：{0:dd/MM/yyyy hh:mmsstt}，宽度：“160px”，模板：'#=样式日期时间（ItemDate（））#'，可排序：false，可筛选：false}，
{
字段：“手动项目”，标题：“”，
模板：“”，
宽度：“24px”，高度：“20px”，可排序：false，可过滤：false
},
{字段：“作者”，标题：“作者”，宽度：“200px”，可排序：false，可筛选：false}，
{
字段：“主题项目”，标题：“项目”，
模板：“+”#if（Subject（）==null）{##}else{###=Subject（）#+'
“+”#}ItemView（）#“+”，
宽度：“100%”，可排序：false，可筛选：false
},
{
命令：[
{
名称：“编辑”，
点击：功能（e）{
var记录=此.dataItem（$（e.currentTarget）.closest（“tr”）；
var myItem=记录；
_项目=我的项目；
如果（_item！=null）{
如果（\u item.canComplete（））{
$（'btnComplete'）.prop（'disabled'，false）；
}
否则{
$（'btnComplete'）.prop（'disabled'，true）；
}
}
kendo.bind（$（“#WindowCreateItem”）、myItem；
$（'btnDelete'）.prop（'disabled'，false）；
var win=$（“#WindowCreateEditItem”）.data（“kendoWindow”）；
win.center（）；
win.open（）；
$（“#diveritem”）.hide（）；
$（“#NewItemName”）.removeClass（'sp-error'）；
}
}
],
标题：“，
宽度：“100px”
}
];
如果（网格！=null）{
grid.destroy（）；
grid.wrapper.empty（）；
}
$（“#MyItemGrid”）.kendoGrid({
数据源：gridDataSource，
更改：功能（e）{
同步复选框（）；
},
//身高：455，
可滚动：对，
可排序：是的，
可选：“多行，行”，
可过滤：正确，
可分页：{
页面大小：[20、60、100]
},
可编辑：false，
数据绑定：函数（e）{
itemApplyStyling（e）；
检查项目（e）；
},
列：列列表
});
};

我遇到的问题是，当我最初加载数据时（数据分别通过ajax调用加载），第一页（共20页）（初始页面大小）显示正确。如果我在上面显示的change函数中放置一个断点，该断点中只有一个日志（不是第二个change函数），那么在查看第1页时，我将看到“e”的长度为20条记录。然而，当我点击第2页时，“e”是剩余记录的长度。例如，如果从ajax调用提取的数据长度为209条记录，则第1页有20条记录，第2页有189条记录。但底部的分页框仍然显示11页，每一页（出于某种原因最后一页除外）显示189条记录。最后一个显示9

---

原著作者是否误解了什么？我只是没看到。

我知道这是一篇老文章，但我也有一个类似的问题。 如果您在代码中注意到，则gridDataSource中包含以下内容：

serverFiltering: true,
        serverSorting: true,

…而且…它也会影响分页，因此会转到服务器。 您应该使用以下选项：

serverFiltering: false,
        serverSorting: false,

它解决了我的问题。 您可以使用以下示例：

---

哪种更改功能？数据源更改功能或网格更改功能？尝试在网格的

pageable:{}

设置下添加

pageSize:pagenumeractive

属性。这有什么不同吗？更新了澄清变更功能的帖子。尝试了pageSize:pageSizeActive（pageNumberActive）只将页面设置为一项