Wednesday, July 8, 2015

ng grid with paging

Posted by at 

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="utf-8">
    <title>ng grid paging</title>
    <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
    <style>
        .gridStyle {
            border: 1px solid rgb(212,212,212);
            width: 600px;
            height: 300px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
    <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
    <script type="text/javascript">
        var app = angular.module('myApp', ['ngGrid']);
        app.controller('MyCtrl', function ($scope, $http) {

            $scope.totalServerItems = 0;
            $scope.pagingOptions = {
                pageSizes: [5, 10, 20],
                pageSize: 5,
                currentPage: 1
            };
            $scope.getPagedDataAsync = function (pageSize, page) {
                setTimeout(function () {
                        $http.get('/api/home/getJson?page=' + page + '&pageSize=' + pageSize + '').success(function (largeLoad) {

                            $scope.myData = largeLoad.data;
                            $scope.totalServerItems = largeLoad.count;
                            if (!$scope.$$phase) {
                                $scope.$apply();
                            }
                        });
                }, 1000);
            };

            $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

            $scope.$watch('pagingOptions', function (newVal, oldVal) {
                if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
                    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
                }
            }, true);

            $scope.gridOptions = {
                data: 'myData',
                enablePaging: true,
                showFooter: true,
                totalServerItems: 'totalServerItems',
                pagingOptions: $scope.pagingOptions
            };
        });
    </script>
</head>
<body ng-controller="MyCtrl">
    <div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>




 public class test
    {
        [Key, DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public string name { get; set; }
        public decimal allowance { get; set; }
        public bool paid { get; set; }
    }
    public class HomeController : ApiController
    {
        public HttpResponseMessage getJson(int page, int pageSize)
        {
            string jsonstr = "[{ \"name\": \"Moroni\", \"allowance\": 505050505050505050, \"paid\": true },{ \"name\": \"Tiancum\", \"allowance\": 53, \"paid\": false },{ \"name\": \"Jacob\", \"allowance\": 27, \"paid\": false },{ \"name\": \"Nephi\", \"allowance\": 29, \"paid\": false },{ \"name\": \"Enos\", \"allowance\": 34, \"paid\": false },{ \"name\": \"Ether\", \"allowance\": 42, \"paid\": false },{ \"name\": \"Alma\", \"allowance\": 43, \"paid\": true },{ \"name\": \"Jared\", \"allowance\": 21, \"paid\": true },{ \"name\": \"Moroni\", \"allowance\": 50, \"paid\": true },{ \"name\": \"Tiancum\", \"allowance\": 53, \"paid\": false },{ \"name\": \"Jacob\", \"allowance\": 27, \"paid\": false },{ \"name\": \"Nephi\", \"allowance\": 29, \"paid\": false },{ \"name\": \"Enos\", \"allowance\": 34, \"paid\": false },{ \"name\": \"Ether\", \"allowance\": 42, \"paid\": false },{ \"name\": \"Alma\", \"allowance\": 43, \"paid\": true },{ \"name\": \"Jared\", \"allowance\": 21, \"paid\": true },{ \"name\": \"Moroni\", \"allowance\": 50, \"paid\": true },{ \"name\": \"Tiancum\", \"allowance\": 53, \"paid\": false },{ \"name\": \"Jacob\", \"allowance\": 27, \"paid\": false },{ \"name\": \"Nephi\", \"allowance\": 29, \"paid\": false },{ \"name\": \"Enos\", \"allowance\": 34, \"paid\": false },{ \"name\": \"Ether\", \"allowance\": 42, \"paid\": false },{ \"name\": \"Alma\", \"allowance\": 43, \"paid\": true },{ \"name\": \"Jared\", \"allowance\": 21, \"paid\": true },{ \"name\": \"Moroni\", \"allowance\": 50, \"paid\": true },{ \"name\": \"Tiancum\", \"allowance\": 53, \"paid\": false },{ \"name\": \"Jacob\", \"allowance\": 27, \"paid\": false },{ \"name\": \"Nephi\", \"allowance\": 29, \"paid\": false },{ \"name\": \"Enos\", \"allowance\": 34, \"paid\": false },{ \"name\": \"Ether\", \"allowance\": 42, \"paid\": false },{ \"name\": \"Alma\", \"allowance\": 43, \"paid\": true },{ \"name\": \"Jared\", \"allowance\": 21, \"paid\": true },{ \"name\": \"Moroni\", \"allowance\": 50, \"paid\": true },{ \"name\": \"Tiancum\", \"allowance\": 53, \"paid\": false }]";


            List<test> jsonList = new List<test>();
            jsonList = new JavaScriptSerializer().Deserialize<List<test>>(jsonstr);

            var totalcount = jsonList.Count();

            var result = jsonList.Skip((page - 1) * pageSize).Take(pageSize);
            string jsonstr2 = new JavaScriptSerializer().Serialize(result);


            StringBuilder sb = new StringBuilder();

            sb.Append("{\"data\":").Append(jsonstr2).Append(", \"count\":").Append(totalcount).Append("}");

            //dynamic stuff = JObject.Parse("{ 'name': 'Moroni', 'allowance': 505050505050505050, 'paid': true }");
            return new HttpResponseMessage
            {
                Content = new StringContent(sb.ToString(),
                                       System.Text.Encoding.UTF8, "application/json")
            };
        }
    }

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)