CODEWITHSUNDEEP
javascriptjqueryhtmlangularjspagination
Sha
Sha

Reputation: 1974

Reducing the pagination load time in Angular JS

I have a HTML template which displays the member details. I have also implemented a pagination for the same so that we can reduce the initial load time. As of now i am retrieving 15 members from the server at a time and displaying it and the other members can be viewed using pagination.

Each time i click the pagination button is is taking approx 0.7 sec to load 15 members. Problem is that say if i click on the pagination 3 it will take 0.7 sec to load the details. again if i click on the pagination 1 it is taking 0.7 sec loading time which it shouldn't. is there any way to store the retrieved details some where so that the details once loaded wont take time when it is clicked again.

<div class="page" data-ng-controller="memberController">
  <table class="table table-bordered table-striped cf">
    <thead>
      <tr>
        <th>Business Name</th>
        <th>Contact Name</th>
        <th>Trade Balance</th>
        <th>Cash Balance</th>
      </tr>
   </thead>
    <tbody>
      <tr data-ng-repeat="member in details">
        <td>{{member.businessname}}</td>
        <td>{{member.person}}</td>
        <td>{{member.balance_trade}}</td>
        <td>{{member.balance_cash}}</td>
        <td>{{member.telephone}}</td>
      </tr>
    </tbody>
  </table>
  <div class="pagi">
    <div ng-repeat="pag in pagination" ng-class="{activePage : pag == curentpage }">
      <div class="navi" ng-click="Pagination($event)" data-page="{{ pag }}">{{ pag }}</div>
    </div>
  </div>
</div>

Controller

function memberController($scope, $http, $cookieStore) {
 var member_list = "https://phoe.merchant.com/api/app/mobifunctions/directory/member_list_wottrans.html?exchangeid=" + exId + "&contactid=" + conId + "&token=" + token;
 $http.get(member_list).success(function(response) {
     $scope.details = response;
     if (!$scope.$$phase) {
         $scope.$apply
     }
 });


 $scope.Pagination = function($event) {
     $('.loading').show();
     var target = $event.target;
     var dataValue = $event.target.innerHTML;
     var member_list = "https://phoe.merchant.com/api/app//member_list_wottrans.html?exchangeid=" + exId + "&contactid=" + conId + "&token=" + token + "&page=" + dataValue;
 $http.get(member_list).success(function(response) {
         $('.loading_mem').hide();
         $scope.details = response;
         if (!$scope.$$phase) {
             $scope.$apply
         }
     });
   }
 }

Please assist me on this. Thanks in advance

Upvotes: 1

Views: 795

Answers (2)

Onur Topal
Onur Topal

Reputation: 3061

this is how I would implement your code.

function memberController($scope, $http, $cookieStore) {
 var member_list = "https://phoe.merchant.com/api/app/mobifunctions/directory/member_list_wottrans.html?exchangeid=" + exId + "&contactid=" + conId + "&token=" + token + "&page="; // note: no page data
 var cacheMembers = function(minPage, maxPage) {
    for(var i = minPage; i<=maxPage, i++) {
        $http.get(member_list + i, { cache: true }); // no need to attach success just for caching
    }
 };

 //cache first 3 page assuming starts from 0
 cacheMembers(0, 2);

 $scope.Pagination = function(pageNumber) {
     $('.loading').show();
     var target = $event.target;
     //var dataValue = $event.target.innerHTML;
     // using HTML is not a good practice actually it is against whole MVC logic
    $http.get(member_list + pageNumber, {cache:true}).success(function(response) {
         $('.loading_mem').hide();
         $scope.details = response;
         if (!$scope.$$phase) {
             $scope.$apply
         }
         //cache others as some of them already cached it s not going to be a major problem
         cacheMembers(pageNumber - 2, pageNumber + 2);
     });
   }

   $scope.Pagination(0); //load first one of course you can also try to read this from URL check $location
 }

in your view where you are rendering the page links use above code bit;

<a ng-click="Pagination($index)" ng-repeat=".........">....

hope this helps.

Upvotes: 1

Davin Tryon
Davin Tryon

Reputation: 67296

If the data is not changing much on the server, you could just cache the results:

$http.get(member_list, { cache: true }).success(function(response) {

This $http cache will be determined based on the url, and since you are changing the page (query string parameter) should cache each page's result. Then, when you ask for a pre-existing page, you will get the cached value.

Upvotes: 0

Related Questions