Paging in AngularJS

Last Updated : 01 Aug, 2024

Pagination in AngularJS 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 content is 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.

HTML

<!DOCTYPE html>
<html>

<head>
    <script data-require="[email protected]" data-semver="1.1.5" src=
"http://code.angularjs.org/1.1.5/angular.min.js">
    </script>
    <link data-require="[email protected]" data-semver="2.3.2" rel="stylesheet"
        href=
"//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
    <script data-require="[email protected]" data-semver="0.3.0"
        src=
"http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.min.js">
        </script>
    <script src="app.js"></script>
</head>

<body ng-app="myApp" ng-controller="ListController as list">
    <h1 style="color: green;" ;>
        GeeksforGeeks
    </h1>
    <h3>AngularJS Paging</h3>
    <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>

app.js:

JavaScript

<script>
  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 Management, 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'
      }
  ];
</script>

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 on the AngularJS application. The "curPage" is initialized with a value 1, which means whenever the webpage loads it will display the first page as a current page. The number of items per page is specified using the "itemsPerPage" variable and it is assigned with a value of 3 as we want to display 3 items on 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 beginning 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 the slice() method we displayed 3 rows that are item numbers 0, 1, and 2. Similarly, on the second, third, and fourth pages, the rest of the items are displayed. This is how pagination in AngularJS works.

Output:

AngularJS Tutorial

sahelibhattacharjee1

Improve

Article Tags :

Paging in AngularJS

Similar Reads

Thank You!

What kind of Experience do you want to share?