Question

我无法弄清楚为什么我的网格的分页控件（客户端）无法正常工作。控件根本不会触发任何明显的事件，并且确定页码的控件（如果多次单击它）超过了应该存在的页数。数据被很好地引入网格，但它只是被打破的分页。有人遇到过类似的问题吗？

JS

var app = angular.module('myApp', ['ngGrid']);
//service call to ge the data
app.service('MyService',function($http){
   var get = function(){
       return $http.get('data.json');
   }
    this.get = get;
});


//controller where the grid is supposed to live
app.controller('NewController',function($scope,$http,MyService) {
    $scope.data =[];
    $scope.columns=[]
    $scope.filterOptions = {
        filterText:'',
        useExternalFilter: false
    }
    $scope.pagingOptions ={
        pageSizes: [5,20,30],
        pageSize: 5,
        totalServerItems: 21,
        currentPage: 1
    };

    $scope.myOptions = {
        data: 'data',
        columnDefs: 'columns',
        pagingOptions: $scope.pagingOptions,
        enablePaging: true,
        showFooter:true,
        filterOptions: $scope.filterOptions,
        showFilter: true
    };



    MyService.get('data.json').success(function(thisData){
        $scope.data = thisData;
        var columnHeadings = $scope.data[0];
        for(var prop in columnHeadings){
            $scope.columns.push({
                field: prop,
                displayName: StringUtils.splitCamelCase(prop)
            });
        }

    })
});

<html ng-app="myApp">
<head lang="en">
    <meta charset="utf-8">
    <title>Getting Started With ngGrid Example</title>
    <link rel="stylesheet" type="text/css" href="css/ng-grid.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script src="libs/jquery-1.9.1.js"></script>
    <script src="libs/jquery-ui-1.9.1.custom.min.js"></script>
    <script src="libs/angular-1.2.js"></script>
    <script src="libs/ng-grid-2.0.11.debug.js"></script>
    <script src="scripts/app.js"></script>
   <script src="Utils/StringUtils.js"></script>
    <style>
        .gridStyle {

            width: 600px;
            height: 500px
        }
    </style>
</head>
<body >


<div ng-controller="NewController">

    <div class="gridStyle" ng-grid="myOptions"></div>
    <div>
        <select ng-options="size as size.name for size in sizes " ng-model="item" ng-change="update()"></select>
        {{item.code}} {{item.name}}
    </div>
</div>




</body>
<script>

</script>

Answer 1

您可以在控制器内手动设置分页，并像这样计算最大值

$scope.maxPages = function(){
    data=Math.round($scope.pagingOptions.totalServerItems/$scope.pagingOptions.pageSize);

    return data;
};

Answer 2

您必须实施$scope.getPagedDataAsync和$scope.setPagingData方法才能使分页按钮生效。

查看服务器端分页Example

ngGrid客户端分页

2 个答案: