Untitled

<!doctype html>
<html ng-app="app">
  <head>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <link href="custom/css/admin.css" rel="stylesheet" type="text/css" />
    <link href="custom/css/skin-blue.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
    <script src="plugins/jQuery/jQuery-2.1.3.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <script src="infinite_app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <button id="reset" class="button" ng-click="reset()">Reset</button>
      <span> &nbsp; &nbsp; First page: {{ firstPage }} &nbsp; &nbsp; Last page: {{ lastPage }}  &nbsp; &nbsp; data.length: {{ data.length }} </span>
      <div ui-grid="gridOptions" class="grid" ui-grid-infinite-scroll></div>
    </div>
  </body>
</html>

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.infiniteScroll']);

app.controller('MainCtrl', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
  $scope.gridOptions = {
    infiniteScrollRowsFromEnd: 40,
    infiniteScrollUp: true,
    infiniteScrollDown: true,
    columnDefs: [
      { name:'equipmentId'},
      { name:'equipmentName' },
      { name:'creationDate' }
    ],
    data: 'data',
    onRegisterApi: function(gridApi){
      gridApi.infiniteScroll.on.needLoadMoreData($scope, $scope.getDataDown);
      gridApi.infiniteScroll.on.needLoadMoreDataTop($scope, $scope.getDataUp);
      $scope.gridApi = gridApi;
    }
  };

  $scope.data = [];

  $scope.firstPage = 2;
  $scope.lastPage = 2;
 var header = {headers:  {
        'Accept': 'application/json',
        'user-token': 'Some Secure Token to connect with REST',
       'Namespace': 'false'
    }
  };

  $scope.getFirstData = function() {
    return $http.get('http://ServerIP:8080/rest/utl/employee?limit=1000',header)
    .then(function(response) {
      var newData = $scope.getPage(response.data.collection.element, $scope.lastPage);
      $scope.data = $scope.data.concat(newData);
    });
  };

  $scope.getDataDown = function() {
    return $http.get('http://ServerIP:8080/rest/utl/employee?limit=1000',header)
    .then(function(response) {
      $scope.lastPage++;
      var newData = $scope.getPage(response.data.collection.element, $scope.lastPage);
      $scope.gridApi.infiniteScroll.saveScrollPercentage();
      $scope.data = $scope.data.concat(newData);
      return $scope.gridApi.infiniteScroll.dataLoaded($scope.firstPage > 0, $scope.lastPage < 4).then(function() {$scope.checkDataLength('up');});
    })
    .catch(function(error) {
      return $scope.gridApi.infiniteScroll.dataLoaded();
    });
  };

  $scope.getDataUp = function() {
    return $http.get('http://ServerIP:8080/rest/utl/employee?limit=1000',header)
    .then(function(response) {
      $scope.firstPage--;
      var newData = $scope.getPage(response.data.collection.element, $scope.firstPage);
      $scope.gridApi.infiniteScroll.saveScrollPercentage();
      $scope.data = newData.concat($scope.data);
      return $scope.gridApi.infiniteScroll.dataLoaded($scope.firstPage > 0, $scope.lastPage < 4).then(function() {$scope.checkDataLength('down');});
    })
    .catch(function(error) {
      return $scope.gridApi.infiniteScroll.dataLoaded();
    });
  };

  $scope.getPage = function(data, page) {
    var res = [];
    for (var i = (page * 100); i < (page + 1) * 100 && i < data.length; ++i) {
      res.push(data[i]);
    }
    return res;
  };

  $scope.checkDataLength = function( discardDirection) {
    // work out whether we need to discard a page, if so discard from the direction passed in
    if( $scope.lastPage - $scope.firstPage > 3 ){
      // we want to remove a page
      $scope.gridApi.infiniteScroll.saveScrollPercentage();

      if( discardDirection === 'up' ){
        $scope.data = $scope.data.slice(100);
        $scope.firstPage++;
        $timeout(function() {
          // wait for grid to ingest data changes
          $scope.gridApi.infiniteScroll.dataRemovedTop($scope.firstPage > 0, $scope.lastPage < 4);
        });
      } else {
        $scope.data = $scope.data.slice(0, 400);
        $scope.lastPage--;
        $timeout(function() {
          // wait for grid to ingest data changes
          $scope.gridApi.infiniteScroll.dataRemovedBottom($scope.firstPage > 0, $scope.lastPage < 4);
        });
      }
    }
  };

  $scope.reset = function() {
    $scope.firstPage = 2;
    $scope.lastPage = 2;

    // turn off the infinite scroll handling up and down - hopefully this won't be needed after @swalters scrolling changes
    $scope.gridApi.infiniteScroll.setScrollDirections( false, false );
    $scope.data = [];

    $scope.getFirstData().then(function(){
      $timeout(function() {
        // timeout needed to allow digest cycle to complete,and grid to finish ingesting the data
        $scope.gridApi.infiniteScroll.resetScroll( $scope.firstPage > 0, $scope.lastPage < 4 );
      });
    });
  };

  $scope.getFirstData().then(function(){
    $timeout(function() {
      // timeout needed to allow digest cycle to complete,and grid to finish ingesting the data
      // you need to call resetData once you've loaded your data if you want to enable scroll up,
      // it adjusts the scroll position down one pixel so that we can generate scroll up events
      $scope.gridApi.infiniteScroll.resetScroll( $scope.firstPage > 0, $scope.lastPage < 4 );
    });
  });

}]);