Implement Pagination In Your AngularJs App With Sails.Js Backend By Following Just Simple 8 Steps

Its very simple in Angular to add a pagination your Grid view..by following the below simple steps.

Step1:Add AngularUI js script file into your html file.ie

Step2:Add it as an angular module.
eg:

var app = angular.module(‘app1’, [‘ui.bootstrap’]);

Step3: Add the below code at the bottom of your GridView

 

Step4:Now set up 2 variables(1.items_per_page,2.currentPage) in your main controller.

function UserCtrl($scope,$http,$API,$resource,$location,$log) {
          $scope.items_per_page = 10;
          $scope.currentPage = 1;
     }

Step5:Add a pageChanged listener into your controller

eg

function UserCtrl($scope,$http,$API,$resource,$location,$log) {
           $scope.items_per_page = 10;
           $scope.currentPage = 1;
           $scope.pageChanged = function() {
                   $API.index('user',$scope); /* See step4 to get see the defenition  */
         };
      }

Step6.define your $API factory to make an API call to your Sails.Js Action which returns the paginated result based on 2 arguments(1.page,2.limit)

eg

app.factory('$API', function($http) {
            var host = 'http://localhost:1337/';
        return {
              index:function(model,$scope) {
                      var url=host+model+'/index?page='+$scope.currentPage+'&limit='+$scope.items_per_page;
                        $http({method: 'GET', url: url}).
                  success(function(data, status, headers, config) {
                    $scope.users=data;
                  }).
                  error(function(data, status, headers, config) {
                    // called asynchronously if an error occurs
                    // or server returns response with an error status.
                  });
              },
                       count:function(model,$scope) {
                      var url=host+model+'/count';
                       $http({method: 'GET', url: url}).
                  success(function(data, status, headers, config) {
                   $scope.totalItems=data.count;
                  }).
                  error(function(data, status, headers, config) {
                    // called asynchronously if an error occurs
                    // or server returns response with an error status.
                  });
              },             
               };   
    });

Step7:Alter your Controller like below example

function UserCtrl($scope,$http,$API,$resource,$location,$log) {
           $scope.items_per_page = 10;
           $scope.currentPage = 1;
           $API.index('user',$scope);
           $API.count('user',$scope);
           $scope.pageChanged = function() {
                   $API.index('user',$scope); /* See step6 to get see the defenition  */
           };
        }

Note:Just added 2 API calls. one is to get the data’s from the API and another to get the total record counts.

Step8:Add 2 Actions in your sails.js controller. like below example

//UserController.js
module.exports = {
  /**
   * Overrides for the settings in `config/controllers.js`
   * (specific to UserController)
   */
  _config: {
    jsonp: true,
      blueprints: {
                    rest: true
                  }
  },
   count:function (req, res) {
          User.count().done(function(error,count){
        //res.header("Access-Control-Allow-Origin:*");
         return res.json({
              count: count,
            });
      });
   },
     index:function (req, res) {
           var page=req.param("page",null);
       var limit=req.param("limit",null);
      if(page&&limit)
      {
            User.find().paginate({page:page,limit:limit})
         .done(function(error,data){
         return res.json(data);
        });
      }
      else
          return res.json([ ]);
   },
};

In the above code the action index will work iff you pass the page & limit paramters.(eg:1&10) and action count will return the total no.of records in your table.
Hope this may help Someone.

Sirin K

Nintriva

Leave a Reply

Your email address will not be published. Required fields are marked *