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

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.