paging in ng grid angularjs

How to paging in angularjs ng-grid?

Hello everyone, I am going to share the code sample for paging to ng-grid in angularjs with respect to your custom page size. 

The detail as given in the below code detail.

HTML code sample
?
1
2
3
4
5
<div ng-app="mobileApp" ng-controller="MobileCtrl">
   <div id="gridView">
       <div class="ngGridStyle" ng-grid="mobileGridView"></div>
   </div>
</div>

<div ng-app="mobileApp" ng-controller="MobileCtrl">
   <div id="gridView">
       <div class="ngGridStyle" ng-grid="mobileGridView"></div>
   </div>
</div>
AngularJs code sample
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
var app = angular.module('mobileApp', ['ngGrid']);
app.controller('MobileCtrl', function ($scope, mobileService) {
$scope.mobiles = null
$scope.mobileColumns = [
            { field: 'Account', displayName: 'Account'},
            { field: 'AlertToMobile', displayName: 'AlertToMobile'},
            { field: 'AlertToEmail', displayName: 'AlertToEmail'},
            {
                field: 'remove', displayName: 'Action',
                cellTemplate: editRowTemplate
            }];
    $scope.filterOptions = {
        filterText: ''
    };
    $scope.setPagingData = function (data, page, pageSize) {
        if (page == null) {
            page = 1;
        }
        var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
         
        $scope.mobiles = pagedData;
         
        $scope.pagingOptions.totalServerItems = data.length;
         
         
        if (!$scope.$$phase) {
            $scope.$apply();
        }
    };
     
   $scope.getPagedDataAsync = function (pageSize, page) {
        setTimeout(function () {
            mobileService.getMobiles().then(function (resp) {
                if (resp.data !== undefined) {
                    $scope.setPagingData(resp.data, page, pageSize);
                }
            });
        }, 100);
    };
     
   $scope.$watch('pagingOptions', function () {
        $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
    }, true);
    $scope.pagingOptions = {
        pageSizes: [10, 20, 50, 100],
        pageSize: 10,
        totalServerItems: 0,
        currentPage: 1
    };
    $scope.mobileGridView = {
        data: 'mobiles',
        rowHeight: 60,
        columnDefs: 'mobileColumns',
        plugins: [new pluginNgGridCVSExport()],
        enablePaging: true,
        showFooter: true,
        sortable: true,
        enableCellSelection: true,
        enableRowSelection: true,
        filterOptions: $scope.filterOptions,
        pagingOptions: $scope.pagingOptions
    };
});
var app = angular.module('mobileApp', ['ngGrid']);

app.controller('MobileCtrl', function ($scope, mobileService) { 

$scope.mobiles = null;  

$scope.mobileColumns = [
            { field: 'Account', displayName: 'Account'},
            { field: 'AlertToMobile', displayName: 'AlertToMobile'},
            { field: 'AlertToEmail', displayName: 'AlertToEmail'},
            {
                field: 'remove', displayName: 'Action',
                cellTemplate: editRowTemplate
            }];

    $scope.filterOptions = {
        filterText: ''
    };

    $scope.setPagingData = function (data, page, pageSize) {
        if (page == null) {
            page = 1;
        }
        var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
        
        $scope.mobiles = pagedData;
        
        $scope.pagingOptions.totalServerItems = data.length;
        
        
        if (!$scope.$$phase) {
            $scope.$apply();
        }
    };
  

   $scope.getPagedDataAsync = function (pageSize, page) {
        setTimeout(function () {
            mobileService.getMobiles().then(function (resp) {
                if (resp.data !== undefined) {
                    $scope.setPagingData(resp.data, page, pageSize);
                }
            });
        }, 100);
    };

     $scope.$watch('pagingOptions', function () {
        $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
    }, true);

    $scope.pagingOptions = {
        pageSizes: [10, 20, 50, 100],
        pageSize: 10,
        totalServerItems: 0,
        currentPage: 1
    };

    $scope.mobileGridView = {
        data: 'mobiles',
        rowHeight: 60,
        columnDefs: 'mobileColumns',
        plugins: [new pluginNgGridCVSExport()],
        enablePaging: true,
        showFooter: true,
        sortable: true,
        enableCellSelection: true,
        enableRowSelection: true,
        filterOptions: $scope.filterOptions,
        pagingOptions: $scope.pagingOptions
    };
});
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.