Paging in AngularJS

Pagination is a technique of dividing the contents of a particular large page into small pages and showing them in an indexed format in order. This technique is very popular in designing search engines in which, the most relatable contents are presented on a priority basis. Also, the pagination technique is used by many Angular developers along with the use of Bootstrap for developing dynamic web pages.

Example:
In the following example, the pagination technique is implemented which is also called the paging technique in AngularJS. The HTML code must be added to the index.html file and the javascript code must be added to the script.js file. In the below-mentioned example, we have created a table and put data into it using javascript and represented the whole implementation using pagination.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <script data-require="angular.js@1.1.5" 
                data-semver="1.1.5" 
                src=
      </script>
        <link data-require="bootstrap-css@2.3.2" 
              data-semver="2.3.2" 
              rel="stylesheet" 
              href=
"//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
        <script data-require="angular-ui-bootstrap@0.3.0" 
                data-semver="0.3.0" 
                src=
      </script>
  
        <link rel="stylesheet"
              href="style.css" />
        <script src="script.js"></script>
        <script src="app.js"></script>
    </head>
    <h1 style="color: green;" ;>GeeksforGeeks</h1>
    <body ng-controller="ListController as list">
        <table border="1">
            <thead>
                <tr>
                    <th>COURSE CODE</th>
                    <th>COURSE NAME</th>
                    <th>COURSE DESCRIPTION</th>
                    <th>NO. OF CHAPTERS</th>
                    <th>AVAILABILITY</th>
                    <th>TOTAL MARKS</th>
                    <th>PASS MARKS</th>
                    <th>STATE OF COURSE</th>
                </tr>
            </thead>
            <tr ng-repeat="item in filteredItems">
                <td>{{item.courseCode}}</td>
                <td>{{item.courseName}}</td>
                <td>{{item.courseDescription}}</td>
                <td>{{item.noc}}</td>
                <td>{{item.available}}</td>
                <td>{{item.totm}}</td>
                <td>{{item.passm}}</td>
                <td>{{item.soc}}</td>
            </tr>
        </table>
        <div data-pagination=""
             data-num-pages="numOfPages()" 
             data-current-page="curPage"
             data-max-size="maxSize" 
             data-boundary-links="true">
      </div>
    </body>
</html>

chevron_right


filter_none

edit
close

play_arrow

link
brightness_4
code

// Write Javascript code here
var app = angular.module('myApp', ['ui.bootstrap']);
  
  app.controller('ListController', function($scope){
    
  $scope.curPage = 1,
  $scope.itemsPerPage = 3,
  $scope.maxSize = 5;
      
    this.items = itemsDetails;
    
    
  $scope.numOfPages = function () {
    return Math.ceil(itemsDetails.length / $scope.itemsPerPage);
      
  };
    
    $scope.$watch('curPage + numPerPage', function() {
    var begin = (($scope.curPage - 1) * $scope.itemsPerPage),
    end = begin + $scope.itemsPerPage;
      
    $scope.filteredItems = itemsDetails.slice(begin, end);
  });
  });
  
  var itemsDetails = [
    { courseCode : 1001,
      courseName : 'Web Technology',
      courseDescription : 'HTML, CSS, AngularJS',
      noc : '10',
      available : 'YES',
      totm : 200,
      passm : 75,
      soc : 'Active'
      },
    { courseCode : 1002,
      courseName : 'Software Technology',
      courseDescription :
      'Alpha testing, Beta testing, 
       Integration testing, Black box testing',
      noc : '10',
      available : 'YES',
      totm : 100,
      passm : 45,
      soc : 'Active'
      },
    { courseCode : 1003,
      courseName : 'Theory Of Computation',
      courseDescription : 'FSM, PDA, TM',
      noc : '100',
      available : 'NO',
      totm : 100,
      passm : 45,
      soc : 'Inactive'
      },
    { courseCode : 1004,
      courseName : 'Algorithm',
      courseDescription : 
        'Greedy algorithms, Dynamic Programming, Sorting',
      noc : '6',
      available : 'YES',
      totm : 200,
      passm : 75,
      soc : 'Active'
      },
    { courseCode : 1005,
      courseName : 'Networking',
      courseDescription : 'IP',
      noc : '12',
      available : 'YES',
      totm : 50,
      passm : 19,
      soc : 'Active'
      },
    {courseCode : 1006,
      courseName : 'Database',
      courseDescription : 'Indexing, B and B+ trees, SQL',
      noc : '24',
      available : 'NO',
      totm : 200,
      passm : 75,
      soc : 'Inactive'
      },
    { courseCode : 1007,
      courseName : 'Programming',
      courseDescription : 'C, C++, JAVA, Python',
      noc : '30',
      available : 'YES',
      totm : 200,
      passm : 75,
      soc : 'Active'
      },
    { courseCode : 1008,
      courseName : 'Data structure',
      courseDescription : 'Tree, Graph',
      noc : '10',
      available : 'NO',
      totm : 100,
      passm : 45,
      soc : 'Inactive'
      },
    { courseCode : 1009,
      courseName : 'Operating Systems',
      courseDescription : 
            'CPU Scheduling, Memory Managment, Disk Management',
      noc : '21',
      available : 'YES',
      totm : 200,
      passm : 75,
      soc : 'Active'
      },
    { courseCode : 1010,
      courseName : 'Compiler',
      courseDescription : 'Top down parsing, Bottom up Parsing',
      noc : '15',
      available : 'YES',
      totm : 200,
      passm : 75,
      soc : 'Active'
      }
  ];

chevron_right


Output:
First page-

Last page-

Explanation:
The web page displays all the details of courses available in tabular form. The technique used here is pagination. This allows only three rows to be played on a single webpage and on the last page only one row is displayed.
There are four pages been created. To display the pagination bar we have used ui.bootstrap as a dependency to the AngularJS application. The “curPage” is initialized with a value 1, it means whenever the webpage loads it will display the first page as a current-page. Number of items per page is specified using “itemsPerPage” variable and it is assigned with a value 3 as we want to display 3 items in a page at maximum.
The “maxSize” variable denotes the number of maximum pages allowed in a pagination system. The line “this.items = itemsDetails;” initiates the itemDetails variable. We have created a function to calculate the number of pages and then stored the value in the scope variable named “numOfPages”.

We have entered the details of 10 courses and calculating the number of pages by the above-mentioned ceil function gave us 4 pages in total. We have 10 items in the “itemsDetails” array, this means that the array indexing will range from 0 to 9. For the first page, the value of “curPage” will be 0. This will make the value of begin as 0. It will help us in getting the first index value of the array. The value of the ‘end’ variable will be 0 + 3 = 3. By using slice() method we displayed 3 rows that are item number 0, 1, and 2. Similarly, in the second, third, and fourth pages, the rest of the items are displayed. This is how pagination in AngularJS works.




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.