[Solved] – AngularJS – How to do paging in AngularJS?

How to do paging in AngularJS?

Asked on October 16, 2018 in AngularJs.
Add Comment


  • 4 Answer(s)

    View

    <!-- table here -->
    <div data-pagination="" data-num-pages="numPages()"
    
    data-current-page="currentPage" data-max-size="maxSize"
    data-boundary-links="true"></div>
    <!-- items/page select here if you like -->
    

    Controller

    todos.controller("TodoController", function($scope) {
    
    $scope.filteredTodos = []
    
    ,$scope.currentPage = 1
    
    ,$scope.numPerPage = 10
    
    ,$scope.maxSize = 5;
    $scope.makeTodos = function() {
    
    $scope.todos = [];
    
    for (i=1;i<=1000;i++) {
    
    $scope.todos.push({ text:"todo "+i, done:false});
    
    }
    
    };
    
    $scope.makeTodos();
    $scope.numPages = function () {
    
    return Math.ceil($scope.todos.length / $scope.numPerPage);
    
    };
    $scope.$watch("currentPage + numPerPage", function() {
    
    var begin = (($scope.currentPage - 1) * $scope.numPerPage)
    
    , end = begin + $scope.numPerPage;
    $scope.filteredTodos = $scope.todos.slice(begin, end);
    
    });
    
    });
    
    Answered on October 16, 2018.
    Add Comment

    prasath

    var todos = angular.module('todos', ['ui.bootstrap']);
    todos.controller('TodoController', function($scope) {
    
    $scope.filteredTodos = [];
    
    $scope.itemsPerPage = 30;
    
    $scope.currentPage = 4;
    $scope.makeTodos = function() {
    
    $scope.todos = [];
    
    for (i=1;i<=1000;i++) {
    
    $scope.todos.push({ text:'todo '+i, done:false});
    
    }
    
    };
    $scope.figureOutTodosToDisplay = function() {
    
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
    
    var end = begin + $scope.itemsPerPage;
    
    $scope.filteredTodos = $scope.todos.slice(begin, end);
    
    };
    $scope.makeTodos();
    
    $scope.figureOutTodosToDisplay();
    $scope.pageChanged = function() {
    
    $scope.figureOutTodosToDisplay();
    
    };
    });
    

    Bootstrap UI component

    <pagination boundary-links="true"
    
    max-size="3"
    
    items-per-page="itemsPerPage"
    
    total-items="todos.length"
    
    ng-model="currentPage"
    
    ng-change="pageChanged()"></pagination>
    
    
    Answered on October 16, 2018.
    Add Comment

    I’ve had to implement pagination quite a few times with Angular, and it was always a bit of a pain for something that I felt could be simplified. I’ve used some of the ideas presented here and elsewhere to make a pagination module that makes pagination as simple as:

    {{ item }}

    // then somewhere else on the page ….

    That’s it. It has the following features:

    No custom code needed in your controller to tie the collection items to the pagination links.
    You aren’t bound to using a table or gridview – you can paginate anything you can ng-repeat!
    Delegates to ng-repeat, so you can use any expression that could be validly used in an ng-repeat, including filtering, ordering etc.
    Works across controllers – the pagination-controls directive does not need to know anything about the context in which the paginate directive is called.

    Answered on February 5, 2019.
    Add Comment

    Angular UI Bootstrap – Pagination Directive

    Check out UI Bootstrap‘s pagination directive. I ended up using it rather than what is posted here as it has enough features for my current use and has a thorough test spec to accompany it.

    View

    <!-- table here -->
    
    <pagination 
      ng-model="currentPage"
      total-items="todos.length"
      max-size="maxSize"  
      boundary-links="true">
    </pagination>
    
    <!-- items/page select here if you like -->

    Controller

    todos.controller("TodoController", function($scope) {
       $scope.filteredTodos = []
      ,$scope.currentPage = 1
      ,$scope.numPerPage = 10
      ,$scope.maxSize = 5;
    
      $scope.makeTodos = function() {
        $scope.todos = [];
        for (i=1;i<=1000;i++) {
          $scope.todos.push({ text:"todo "+i, done:false});
        }
      };
      $scope.makeTodos(); 
    
      $scope.$watch("currentPage + numPerPage", function() {
        var begin = (($scope.currentPage - 1) * $scope.numPerPage)
        , end = begin + $scope.numPerPage;
    
        $scope.filteredTodos = $scope.todos.slice(begin, end);
      });
    });

    I have made a working plunker for reference.


    Legacy Version:

    View

    <!-- table here -->
    
    <div data-pagination="" data-num-pages="numPages()" 
      data-current-page="currentPage" data-max-size="maxSize"  
      data-boundary-links="true"></div>
    
    <!-- items/page select here if you like -->

    Controller

    todos.controller("TodoController", function($scope) {
       $scope.filteredTodos = []
      ,$scope.currentPage = 1
      ,$scope.numPerPage = 10
      ,$scope.maxSize = 5;
    
      $scope.makeTodos = function() {
        $scope.todos = [];
        for (i=1;i<=1000;i++) {
          $scope.todos.push({ text:"todo "+i, done:false});
        }
      };
      $scope.makeTodos(); 
    
      $scope.numPages = function () {
        return Math.ceil($scope.todos.length / $scope.numPerPage);
      };
    
      $scope.$watch("currentPage + numPerPage", function() {
        var begin = (($scope.currentPage - 1) * $scope.numPerPage)
        , end = begin + $scope.numPerPage;
    
        $scope.filteredTodos = $scope.todos.slice(begin, end);
      });
    });

    I have made a working plunker for reference.

    Answered on February 9, 2019.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.