What is the simplest way to implement pagination

Question

I make a request and get a result of products in this JSON format:

[{
"Id": 1092,
"Name": "Product Name",
"ItemNumber": 11111111111,
"PictureUrl": "http://www.bealecorner.com/trv900/respat/color-chart.png",
"Categories": [{
    "Code": "43",
    "Label": "CatName"
}],
"Rating": 5,
"NumberOfRatings": 1,
"ProductLanguage": "en" 
}]

My html:

<div class="item columns large-3 medium-4 small-6 xsmall-12 medium-offset-" column="3" column-size-class="small" ng-repeat="product in products | filter:filters.Categories.Code">
                    <div class="product content-item">
                        <figure><img src="{{product.PictureUrl}}"></figure>
                        <div class="info">
                            <p class="title">{{product.Name}}</p>
                            <p class="subtitle"></p>
                            <div class="mui-product-tile-footer">
                                <div class="mui-js-rating" style="display: block;">
                                    <div class="mui-rating is-small" title="Bewertung: 3">
                                        <i ng-class="{true: 'star-on-png', false: 'star-off-png'}[product.Rating >= 1]"></i>
                                        <i ng-class="{true: 'star-on-png', false: 'star-off-png'}[product.Rating >= 2]"></i>
                                        <i ng-class="{true: 'star-on-png', false: 'star-off-png'}[product.Rating >= 3]"></i>
                                        <i ng-class="{true: 'star-on-png', false: 'star-off-png'}[product.Rating >= 4]"></i>
                                        <i ng-class="{true: 'star-on-png', false: 'star-off-png'}[product.Rating === 5]"></i>
                                    </div>
                                    <div class="mui-rating-counter is-small" aria-label="1 Bewertung"><span>{{product.NumberOfRatings}}</span></div>
                                </div>
                            </div>
                        </div>
                        <a href="#">Produkt bewerten</a>
                    </div>
                </div>

Now I was wondering what is the most simple way of adding a pagination. I have already informed myself about Angular Bootstrap UI repository and I don't want to use that.

Possible duplicate of [How to do paging in AngularJS?](https://stackoverflow.com/questions/10816073/how-to-do-paging-in-angularjs) — rakwaht, Aug 31 '17 at 12:56
Then what are you using for client-side? It seems you have some {{ }} there. People assume you use Angular. — ice 13, Aug 31 '17 at 13:03
@ice13 I assume he is using angular also 'cause it's in the question tag — rakwaht, Aug 31 '17 at 13:13
@ice13 I do use angular. I don't want to use Angular UI Bootstrap though — deadpool_Y7, Aug 31 '17 at 15:19

score 1 · Accepted Answer · answered Aug 31 '17 at 13:13

I think that you should implement it your self if don't wan't to relay on external libraries. This solution is implemented with ng-repeat:

var app = angular.module('myApp', []);

app.controller('MyCtrl', ['$scope', '$filter', function($scope, $filter) {
  $scope.currentPage = 0;
  $scope.pageSize = 10;
  $scope.data = [];
  $scope.q = '';

  $scope.getData = function() {
    return $filter('filter')($scope.data, $scope.q)
  }

  $scope.numberOfPages = function() {
    return Math.ceil($scope.getData().length / $scope.pageSize);
  }

  for (var i = 0; i < 73; i++) {
    $scope.data.push("LiItem" + i);
  }
}]);

app.filter('startFrom', function() {
  return function(input, start) {
    start = +start; //parse to int
    return input.slice(start);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <input ng-model="q" id="search" class="form-control" placeholder="Filter text">
  <select ng-model="pageSize" id="pageSize" class="form-control">
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="20">20</option>
     </select>
  <ul>
    <li ng-repeat="item in data | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize">
      {{item}}
    </li>
  </ul>
  <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
        Previous
    </button> {{currentPage+1}}/{{numberOfPages()}}
  <button ng-disabled="currentPage >= getData().length/pageSize - 1" ng-click="currentPage=currentPage+1">
        Next
    </button>
</div>

What is the simplest way to implement pagination

1 Answers1