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（初始页面大小）正确显示。如果我在上面显示的更改函数中放置一个断点，只有一个日志（不是第二个更改函数），我会看到＆＃34; e＆＃34;查看页面1时长度为20条记录。当我点击第2页时，＆＃34; e＆＃34;是剩余的记录长度。例如，如果从ajax调用中提取的数据长度为209条记录，则第1页有20条记录，第2页有189条。尽管底部的分页框仍然显示11页，每一页（由于某种原因除了最后一页））显示189条记录。最后一个节目9。

原作者是否错误配置了某些内容？我只是没有看到它。

Answer 1

我知道这是一个老帖子，但是，我只是遇到了类似的问题。如果你在代码中注意到，你在gridDataSource中有这个：

serverFiltering: true,
        serverSorting: true,

......而且......它也会影响分页，所以它会进入服务器。你应该用这个：

serverFiltering: false,
        serverSorting: false,

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

Kendo Grid显示第二页上的所有剩余项目

1 个答案: