Using ng grid data from server side with filteration and pagination option

Posted By : Hitesh Arora | 27-Dec-2014

angularjs

Below is an example on how to use ng-grid-

1.Render your HTML page where you want to display nggrid
2.Include angular js in your application ,cdn for the same :

     https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js#sthash.qp6pLa5o.dpuf

3.Include library for ng grid , cdn for the same :

     https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.js

4.Now define angularjs in your application which can be done by using ng-app. It is a directive that defines an angularjs application as well as to control the data of angularjs application make the use of ng-controller.

<html> ;  
    <head>
        <title>Getting Started With ngGrid Example</title>  
    </head>
    <body ng-app="myApp" ng-controller="MyCtrl">
        
    </body>
</html>

5.Include the grid in your HTML

  <div class="gridStyle" ng-grid="gridOptions"></div>

6.Now ready your controller with some ng-grid options as well as server call


 //inject nggrid in your application
 var app = angular.module('myApp', ['ngGrid']);
 
 //$http call is used to get the data from the server
 app.controller('MyCtrl', function($scope, $http) {

 //these are the filter options which includes options for filtering the data 
 $scope.filterOptions = {
      
      //text you want to search will be put inside the filterText
      filterText: ""
 }; 
	
 //variable define for getting the total no of items to be displayed
 $scope.totalServerItems = 0; 	

 //these are the paging(pagination) options	    
 $scope.pagingOptions = {
      //no of records that need to be displayed per page will be depend on pagesizes
      pageSizes: [1,2,3], 
      pageSize: 1,
      //this is for the page no that is selected
      currentPage: 1
 };  

 //this is the method that is used to call the server and bring back the data in nggrid	    
 $scope.getPagedDataAsync = function (pageSize, page, searchText) {
      setTimeout(function () {
         var data;
    	 var page = $scope.pagingOptions.currentPage;
         var pageSize = $scope.pagingOptions.pageSize;

         //if filter text is there then this condition will execute
         if (searchText) {
               var ft = searchText.toLowerCase();
               $http({
                   method:'GET',
                   url:'jsonFiles/largeLoad.json',	
                   data:{currentPage:page,pageSize:pageSize}	  
               }).success(function (largeLoad) {
                         //with data must send the total no of items as well 
                         $scope.totalServerItems=largeLoad.data.totalElement;
                         //here's the list of data to be displayed  
                         data = largeLoad.data.list.filter(function(item) {
                             return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                        });
                        $scope.setPagingData(data,page,pageSize);
               });            
          }
          else 
          {
               $http({
                   method:'GET',
                   url:'jsonFiles/largeLoad.json',	
                   data:{currentPage:page,pageSize:pageSize}	  
               }).success(function (largeLoad) {
            		   $scope.totalServerItems=largeLoad.data.totalElement;
            		   $scope.setPagingData(largeLoad.data.list,page,pageSize);
               });
          }
        },100);
    };
    
    //according to the data coming from server side,pagination will be set accordingly	    
    $scope.setPagingData = function(data, page, pageSize){
        $scope.myData = data;
        if (!$scope.$$phase) {
            $scope.$apply();
        }
    };
	
    //watch for pagination option.here pagingOptions will be watched each time value changes and then set the data accordingly    
    $scope.$watch('pagingOptions', function (newVal, oldVal) {
        if (newVal !== oldVal || newVal.currentPage !== oldVal.currentPage) {
          $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
        }
    }, true);

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

    // here the grid will be set , data will be stored in myData
    $scope.gridOptions = {
			data: 'myData',
			enablePaging: true,
			showFooter: true,
			totalServerItems: 'totalServerItems',
			pagingOptions: $scope.pagingOptions,
			filterOptions: $scope.filterOptions,

                        //field : id is the key from the data coming from server side
			columnDefs:[{displayName:'Sno',field:'id'},
			            {displayName:'Name',field:'raisedBy'},
			            {displayName:'Address',field:'raisedAgainst'},
			           ]
    };
	    
    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
})

One more thing in your server side query set pageSize as your maximum number of records and set (currentPage-1)*pageSize as your offset

Thanks