剣道ページャー（ページング可能）は、レコードがあっても「表示する項目がありません」を表示しています

Question

ここでは、剣道UIをAngular-JSで使用しています。

剣道のグリッドテーブルにページ分割機能（ページング可能）を統合しているときに、データ（レコード）が正しく読み込まれていても「表示するアイテムがありません」という問題が発生しました。続き

いただきましたそれと間違って、任意の助けが充当されるだろうわからない...

は、私は、データグリッドにinit /ロードするために使用している機能です。

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 

そして、あなたがdocumentationあたりとしてschema.totalからreturn response.totalに戻っているものに変更。