Retrieve and show records in ion-list when user clicks "Next" or "Previous" buttons

ionic-v1
1

Hello,

I have to show more than 2000 records, 100 records at a time. I am retrieving records using $http.get. I want to update “ion-list” so that the next or previous 100 records are retrieved and shown when user clicks “Previous Page” and “Next Page” links

I do not want to use infinite scroll as it will slowly load 2000+ records, 200 at a time and app may get slow.

Kindly help with solution.

image

–template–

<ion-view title="{{cPrompts.title}}">
        <form name="appSearchForm" novalidate="">
        <ion-header-bar class="bar bar-subheader item-input-inset">
        <div class="item-input-wrapper">
            <input id="searchKey" type="search" placeholder="{{cPrompts.placeholder}}" ng-model="search.App" autocorrect="off" name="searchApp" ng-minlength="4">
            <button class="button button-clear" ng-click="clearSearch()">X</button>
        </div>
        <button class="button button-energized" ng-click="searchJ()">Search</button>
        </ion-header-bar>
        </form>
        <ion-content>
          <div class='item item-divider item-text-wrap' ng-show="cUpdates.length >= 1">Found {{cUpdates.length}} judgement(s) with '{{search.App}}' {{cPrompts.foundText}}</div>
          <div class='item item-divider item-text-wrap' ng-show="cUpdates.length == 0">No judgement(s)  with '{{search.App}}' {{cPrompts.notFoundText}}</div>
          
        <div>
        <a class="button icon-left ion-chevron-left button-clear button-dark">Previous page</a>
        <a class="button icon-right ion-chevron-right button-clear button-dark">Next page</a>
        </div>

          <ion-list>
            <ion-item class="item-icon-right" style= "cursor:pointer" ng-repeat="cUpdate in cUpdates" ui-sref='app.message({cUpdateId: cUpdate.id})'>
            <div class="left-BorderY">
            <h2>{{cUpdate.appelant}} <span style="color: grey;">vs</span><br>{{cUpdate.respondent}}</h2>
            </div>
            <i class="icon ion-chevron-right icon-accessory energized" style="color:#EF473A !important; font-size: 26px;"></i>
            </ion-item>
          </ion-list>
        </ion-content>
    </ion-view>

– controller ----

.controller('cUpdatesCtrl', function($scope, $http,$state, $stateParams, $ionicLoading,cUpdatesService,sysConfig, uConfig, updateService, companyInfo) {

  $scope.search = {
    Typ: 'res',
    App: null,
    PageNo: 0,
    typ: sType,
  };
      
  $scope.searchJ = function() {
    $ionicLoading.show({
        template: 'Getting judgements ...<br><br><ion-spinner icon="android"></ion-spinner>',
        hideOnStageChange: true,
        duration: 60000,
    });
    $scope.cUpdates = {};    
    updateService.getJudgements($scope.search.App,$scope.search.Typ,$scope.search.PageNo).then(function(cUpdates){
        $scope.cUpdates = cUpdates[0].judDetails;
        cUpdatesService.setcUpdates($scope.cUpdates);
        $ionicLoading.hide();
    });    
  };

  $scope.clearSearch = function() {
      $scope.search.App = null;
      $scope.cUpdates = {};
  };
        
})

.factory('updateService', function($http,sysConfig, uConfig) {
    var updates = [];

    return {
    getJudgements: function(s,typ,pageno){
            return $http.get(sysConfig.apiUrl + "judgementsAPI.php", { params: { "s": s, "typ": typ, "pageno": pageno} }).then(function(response){
                updates = response.data;
                return updates;
            });
        };
    },
        
    };
})