ngGrid 客户端分页答案

【问题标题】：ngGrid client side pagingngGrid 客户端分页
【发布时间】：2014-12-03 18:50:38
【问题描述】：

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

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>

【问题讨论】：

标签： javascript ajax angularjs ng-grid

【解决方案1】：

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

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

    return data;
};

【讨论】：

它只用于获取 maxpages 而不是在 ng-grid 分页选项中设置

【解决方案2】：

您必须实现 $scope.getPagedDataAsync 和 $scope.setPagingData 方法才能使分页按钮起作用。

看看Server-Side Paging Example

【讨论】：