Kendo 在第二页上显示所有剩余项目的网格

Question

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

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.

是不是原作者配置有误？我就是没看到。

Answer 1

我知道这是旧的 post，但是，我也有类似的问题。如果您在代码中注意到，您的 gridDataSource 中有这个：

serverFiltering: true,
        serverSorting: true,

...并且...它也会影响分页，所以它会转到服务器。你应该使用这个：

serverFiltering: false,
        serverSorting: false,

它解决了我的问题。你可以玩这个例子： http://dojo.telerik.com/@Kiril/EFAb

Kendo 在第二页上显示所有剩余项目的网格

Kendo Grid showing all remaining items on second page

javascript

ajax

jquery

kendo-ui

kendo-grid