ngGrid客戶端分頁

Question

我不知道為什么ng Grid的分頁控件（客戶端）無法正常工作。 控件根本不會觸發任何可察覺的事件，並且如果您多次單擊該控件，則確定頁碼的控件將超過應有的頁數。 數據被很好地帶入網格，但是只是分頁中斷了。 有人遇到類似的問題嗎？

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方法才能使分頁按鈕正常工作。

看一下服務器端分頁示例

ngGrid客戶端分頁

問題描述

2 個解決方案

解決方案1
0 2014-07-07 18:28:28

解決方案2
0 2014-12-03 10:28:53

ngGrid客戶端分頁

問題描述

2 個解決方案

解決方案1 0 2014-07-07 18:28:28

解決方案2 0 2014-12-03 10:28:53

解決方案1
0 2014-07-07 18:28:28

解決方案2
0 2014-12-03 10:28:53