javascript - Kendo Pager(可分页)显示 'No items to display'，即使记录在那里

Question

这里我使用 Kendo-UI 和 Angular-JS。

在 Kendo 网格表上集成分页(可分页)时遇到问题，即使正确加载数据(记录)，它也会显示“没有可显示的项目”。

不确定有什么问题，任何帮助都会被适当...

以下是我用来加载/初始化数据网格的函数。

function getProjectsAtAGlance() {
                $scope.gridOptions = {
                    scrollable: false,
                    sortable: true,
                    pageable: {
                        pageSizes: [5, 10, 15, 20, 25, 50]
                    },
                    change: function (e) {
                        $scope.pageSize = $scope.gridOptions.dataSource.pageSize();
                    },
                    dataSource: {
                        serverPaging: true,
                        transport: {
                            read: function (options) {

                                $scope.options = options;

                                var filters = {
                                    skip: options.data.skip,
                                    take: options.data.take,
                                    sortBy: $scope.sortBy,
                                    projectGlanceIncludeArchived: $scope.includeArchivedProjects,
                                    projectGlanceExcludeProjectsWithNoBudgets: $scope.excludeProjectsWithNoBudgets
                                };

                                $http.post("/Home/ProjectsAtAGlanceReport", filters)
                                    .success(function (result) {
                                        var projects = result.projects;

                                        for (var i = 0; i < projects.length; i++) {
                                            var project = projects[i];
                                            project.startDate = moment(projects[i].startDate).format("L");
                                            project.endDate = moment(projects[i].endDate).format("L");
                                        }

                                        options.success(projects);

                                    })
                                    .error(function (error) {
                                        console.log(error);
                                    });
                            }
                        },
                        pageSize: $scope.pageSize,

                        schema: {
                            total: function (respose) {
                                return $scope.data;
                            },

                            model: {
                                fields: {
                                    name: {
                                        editable: false,
                                        nullable: true
                                    },
                                    resourceCount: {
                                        editable: false,
                                        nullable: true
                                    },
                                    clientName: {
                                        editable: false,
                                        nullable: true
                                    },
                                    startDate: {
                                        editable: false,
                                        nullable: true
                                    },
                                    endDate: {
                                        editable: false,
                                        nullable: true
                                    },
                                    projectId: {
                                        editable: false,
                                        nullable: true
                                    },
                                    projectedBudgetPercentage: {
                                        defaultValue: 100
                                    },
                                    defaultValue: {
                                        totalBudget: 0,
                                        totalHours: 0,
                                        burnedBudget: 0,
                                        burnedHours: 0,
                                        projectedBudget: 0,                                         
                                        projectedHours: 0,
                                        projectedHoursPercentage: 0,
                                        remainingBudget: 0,
                                        remainingBudgetPercentage: 0,
                                        remainingHours: 0,
                                        remainingHoursPercentage: 0
                                    }
                                }
                            }
                        }
                    },

                    columns: [
                        {
                            template: "<div class='name-column'>" +
                                "<p><a class='highlighted-blue' href='/Projects/ProjectAdmin/{{dataItem.projectId}}'>{{dataItem.name}}</a></p>" +
                                "<small>{{dataItem.clientName}}</small>" +
                                "<small ng-if=\"dataItem.startDate !== 'Invalid date'\">{{dataItem.startDate}} - {{dataItem.endDate}}</small>" +
                                "<small ng-if=\"dataItem.startDate === 'Invalid date'\"><i class='fa fa-exclamation-triangle text-danger'></i> Start date and end date are not defined.</small>" +
                                "<small>{{dataItem.resourceCount}} Resources</small></div>"

                        },
                        {
                            template: kendo.template($("#kendoProgressBarColumnTemplate").html())
                        },
                        {
                            template: "<accuracy-gauge-per-project accuracy='dataItem.accuracy'></accuracy-gauge-per-project>"
                        },
                        {
                            template:
                                "<p>{{dataItem.accuracy | percentage:0}} Accurate</p>" +
                                "<p>{{100-dataItem.accuracy | percentage:0}} Non Accurate</p>"
                        }
                    ]
                };
            }

这里是一个输出片段供引用。

Answer 1

我认为pageSize属性需要在 dataSource 中声明，如下所示:

dataSource: {
    serverPaging: true,
    transport: {... // transport options
    },
    pageSize: $scope.pageSize // before end of dataSource       
},... // more grid stuff

并将返回的内容从 schema.total 更改为 return response.total，按照 documentation .