Saturday, May 16, 2015

Client side pagination using AngularJS

The great advantage of client side pagination is , we need not go to server for each page. General client side pagination is nice when the amount of data is not very much. The reason is , It takes all data from server and render page wise.

There are various techniques to implement pagination in client side. In this article, we will use AngularJS to implement client side pagination.

var todos = angular.module('travel', ['ui.bootstrap']);

todos.controller('TodoController', function ($scope, $http) {
    $scope.filteredTodos = []
   , $scope.currentPage = 1
   , $scope.numPerPage = 5
   , $scope.maxSize = 5;

    $scope.makeTodos = function () {
        $scope.todos = [];
       
        $http.get('/Hotel/ReturnHotels').then(function (response) {
            $scope.todos = response.data.Establishments;

            $scope.$watch('currentPage + numPerPage', function () {
                var begin = (($scope.currentPage - 1) * $scope.numPerPage)
                , end = begin + $scope.numPerPage;
                $scope.filteredTodos = $scope.todos.slice(begin, end);
            });
        });
    };

    $scope.makeTodos();
});


Here is controller to get data and to implement pagination. Here we will use bootstrap ui framework to creat pagination.

Please have a look that we have injected ‘ui.bootstrap’ module in module of angular. $scope.$watch will trigger as soon as data will get change for ‘currentPage and PageNumber’ variable. That is needed, to show updated data when user will navigate page to page.

Here is client code

<!DOCTYPE html>
<html ng-app="travel">
<head>
    <link data-require="bootstrap-css" data-semver="3.3.1" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="angular.js" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script data-require="ui-bootstrap" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="~/js/app.js"></script>
</head>

<body ng-controller="TodoController">
    <div>
            <ul>
                <li ng-repeat="todo in todos">{{todo.Name}}</li>
            </ul>

            <pagination ng-model="currentPage"
                        total-items="todos.length"
                        max-size="maxSize"
                        boundary-links="true">
            </pagination>
    </div>
   
</body>

</html>


Once we run the application we will see data with pagination.


Please keep in mind that client side pagination is good when data is not in high volume because it will pull all data at a time.

If there is really huge data to display it’s always good to implement server side pagination. 

Posted by at
Labels:

9 comments:

  1. AnishDecember 8, 2015 at 7:16 AM

    Very good explanantion.

    AngularJs Training

    ReplyDelete
  2. kavyasriNovember 1, 2019 at 10:59 PM

    Nice Blog With Full of Knowledge Thanks For Sharing.

    Angular JS Online training
    Angular JS training in hyderabad

    ReplyDelete
  3. keerthanaJuly 26, 2020 at 7:19 PM

    I am really happy with your blog because your article is very unique and powerful for new reader.Prefer to study this kind of material. Nicely written information in this post,the quality of content is fine and the conclusion is lovely. Things are very open and intensely clear explanation of issues. PHP Training in Chennai | Certification | Online Training Course | Machine Learning Training in Chennai | Certification | Online Training Course | iOT Training in Chennai | Certification | Online Training Course | Blockchain Training in Chennai | Certification | Online Training Course | Open Stack Training in Chennai |
    Certification | Online Training Course

    ReplyDelete
  4. un knownOctober 8, 2020 at 7:50 AM

    Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    devops online training
    best angularjs online training
    top angularjs online training

    ReplyDelete
  5. un knownOctober 17, 2020 at 5:21 AM

    Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    devops online training
    best angularjs online training
    top angularjs online training

    ReplyDelete
  6. un knownOctober 31, 2020 at 5:40 AM

    Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    angular js online training
    best angular js online training
    top angular js online training

    ReplyDelete
  7. un knownJanuary 11, 2021 at 4:02 AM

    Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    angular js online training
    best angular js online training
    top angular js online training

    ReplyDelete
  8. MadhuAugust 27, 2022 at 12:07 AM

    best ca colleges in hyderabad
    best mec inter colleges in hyderabad
    best cec inter colleges in hyderabad
    best cma colleges in hyderabad
    best degree colleges in hyderabad
    best cs colleges in hyderabad

    ReplyDelete

Subscribe to: Post Comments (Atom)