AngularJS pagination – AngularJS pagination example

AngularJS pagination – AngularJS pagination example

AngularJS pagination – AngularJS pagination example is an example of how to implement pagination with AngularJS or javascript with logic like google search engine results.

The case is composed in AngularJS, however the pagination rationale is unadulterated javascript so it could without much of a stretch be utilized with other javascript apparatuses and structures, for example, NodeJS, ReactJS, EmberJS and so on.

View DemoDownload

The front end pagination segment in the illustration is styled utilizing Bootstrap.

In following up code we create index.html and script.js for AngularJS pagination example, we pass value uisng for loop and pass value in pagination. youy need to chage this valu with your value. pass you value to index.html. it is very easy and simple method for AngularJS pagination example.

index.html for AngularJS pagination example

<!DOCTYPE html>
<html ng-app="pagination">

  <head>
    <link rel="stylesheet" href="http://www.onlinecode/example/AngularJS-pagination-example/bootstrap-combined.min.css" />
    <script src="http://www.onlinecode/example/AngularJS-pagination-example/angular.min.js"></script>
    <script src="http://www.onlinecode/example/AngularJS-pagination-example/ui-bootstrap-tpls-0.3.0.min.js"></script>
    <script src="script.js"></script> 
	<title>AngularJS pagination - AngularJS pagination with example </title>
  </head>

  <body ng-controller="TodoController">
    <h1>AngularJS pagination - AngularJS pagination with example </h1>
	
	<h2>AngularJS pagination with example</h2>
    <h4>{{pagination.length}} remain</h4>
    <ul>
      <li ng-repeat="paging in filteredTodos">{{paging.text}}</li>
    </ul>
    <div data-pagination="" data-num-pages="numPages()" 
      data-current-page="currentPage" data-max-size="maxSize"  
      data-boundary-links="true"></div>
  </body>

</html>

script.js for AngularJS pagination example

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

pagination.controller('paginationController', function($scope) {
   $scope.filteredpagination = []
  ,$scope.currentPage = 1
  ,$scope.numPerPage = 10
  ,$scope.maxSize = 5;
  
  $scope.makepagination = function() {
    $scope.pagination = [];
    for (i=1;i<=1000;i++) {
      $scope.pagination.push({ text:'paging  '+i, done:false});
    }
  };
  $scope.makepagination(); 
  
  $scope.numPages = function () {
    return Math.ceil($scope.pagination.length / $scope.numPerPage);
  };
  
  $scope.$watch('currentPage + numPerPage', function() {
    var beginPage = (($scope.currentPage - 1) * $scope.numPerPage)
    , end = beginPage + $scope.numPerPage;
    
    $scope.filteredpagination = $scope.pagination.slice(beginPage, end);
  });
});

See hear ::

View DemoDownload

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  52  =  56

We accept paid advance and paid guest Posting on our Site : Contact US