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

我继承了一个网页，上面有一个剑道网格显示一些数据。网格是在启用分页的客户端上设置的，可以使用不同的页面大小。下面的代码:

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

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

原作者配置错了吗?我只是没看出来。