Getting next and previous set of records from array using angular & pagination

Question

I have come up with this plunker to show my issue.

The behaviour that I am looking for is that when the user clicks on the right arrow it goes to next page and the left arrow to the previous page. If user is on page 10 then when clicks right arrow changes the number of pages shown on pagination links from 2-11 and 11 is highlighted.

If they click on right arrow again it changes the number of pages shown on pagination links from 3-12 and 12 is highlighted. This would carry on until page 20 reached then would not allow them any further. Should also work going in previous direction also by decrementing, if user on page 1 clicking on the left arrow has no effect. Hope this is clear.

HTML:

<ul class="pagination pagination-lg">
      <li class="page-item">
        <a href="#" ng-click="search($index-1)"> <span aria-hidden="true">&laquo;</span> <span class="sr-only">Previous</span> </a>
      </li>
      <li ng-class="currentPage === $index+1 ? 'active' : ''" ng-repeat="i in getNumber(numberOfPages) track by $index"><a class="page-link" href="#" ng-click="search($index+1)">{{$index+1}}</a></li>
      <li class="page-item">
        <a href="#" ng-click="search($index+1)"> <span aria-hidden="true">&raquo;</span> <span class="sr-only">Next</span> </a>
      </li>
    </ul>

Angular/JS:

$scope.search = function(index){
      $scope.currentPage = index;

      $http.get('https://jsonplaceholder.typicode.com/todos').then(function (response) {
        var temp = response.data; 
        $scope.data = temp.splice(pageSize * (index-1), 10);
      })
    }

See this plunker for full code. Any help appreciated.

Anders Vestergaard · Accepted Answer · 2017-02-17 20:00:10Z

So a the main idea for my possible solution would be to make an array with page numbers instead of trying to keep track of a array index. I've made quite some changes because of this idea.
This is the solution: https://plnkr.co/edit/d1JhJDNskNEMh0G59b9K?p=preview

The main page logic happens in getNumber()

$scope.getNumber = function() {

  //Add elements when increasing currentPage
  for (var i = 0; i < $scope.currentPage - $scope.pages[$scope.pages.length - 1]; i++) {
    $scope.pages.shift();
    $scope.pages.push($scope.currentPage);
  }

  //Add elements when decreasing currentPage
  for (var i = 0; i < $scope.pages[0] - $scope.currentPage; i++) {
    $scope.pages.pop();
    $scope.pages.unshift($scope.currentPage);
  }

  return $scope.pages;
}

This method keeps track of the array with page numbers and adds pagenumbers if currentPage is greater than the last pagenumber in the array and the other way around. Your problem is only a matter of logic.

I've added the all the code below, so the plunker is not needed.

First the javascript then the HTML

(function () {

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

}());

(function(module) {

  var demoController = function($http, $scope) {

    $http.get('https://jsonplaceholder.typicode.com/todos').then(function(response) {
      $scope.data = response.data;
    })

    var pageSize = 10;
    var totalItems = 200;

    $scope.numberOfPages = totalItems / pageSize;
    $scope.currentPage = 0;
    $scope.pages = new Array(pageSize);
    for (var i = 1; i <= pageSize; i++) {
      $scope.pages[i - 1] = i;
    }


    $scope.getNumber = function() {

      //Add elements when increasing currentPage
      for (var i = 0; i < $scope.currentPage - $scope.pages[$scope.pages.length - 1]; i++) {
        $scope.pages.shift();
        $scope.pages.push($scope.currentPage);
      }

      //Add elements when decreasing currentPage
      for (var i = 0; i < $scope.pages[0] - $scope.currentPage; i++) {
        $scope.pages.pop();
        $scope.pages.unshift($scope.currentPage);
      }

      return $scope.pages;
    }

    $scope.search = function(index) {
      if (index <= 0 || index > totalItems / pageSize) return;
      $scope.currentPage = index;

      $http.get('https://jsonplaceholder.typicode.com/todos').then(function(response) {
        var temp = response.data;
        $scope.data = temp.splice(pageSize * (index - 1), 10);
      })

    }

  };

  module.controller("demoController", demoController);

}(angular.module("app")));

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
    <script src="ctrl.js"></script>
  </head>

  <body ng-app="app">
    <div class="container">
      <h1>Hello Plunker!</h1>
      
      <div ng-controller="demoController" ng-init="search(1)">
        
        <div ng-repeat="item in data">
          <div>{{item.id}} {{item.title}}</div>
        </div>
        
        <ul class="pagination pagination-lg">
          <li class="page-item">
            <a href="#" ng-click="search(currentPage-1)"> <span aria-hidden="true">&laquo;</span> <span class="sr-only">Previous</span> </a>
          </li>
          <li ng-class="currentPage === i ? 'active' : ''" ng-repeat="i in getNumber() track by $index"><a class="page-link" href="#" ng-click="search(i)">{{i}}</a></li>
          <li class="page-item">
            <a href="#" ng-click="search(currentPage+1)"> <span aria-hidden="true">&raquo;</span> <span class="sr-only">Next</span> </a>
          </li>
        </ul>
        
      </div>
      
    </div>
  </body>

</html>

Collectives™ on Stack Overflow

Getting next and previous set of records from array using angular & pagination

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related