Paging in AngularJS - GeeksforGeeks

27 Jun, 2020
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.
<!DOCTYPE html><html ng-app="myApp">    <head>        <script data-require="angular.js@1.1.5"                 data-semver="1.1.5"                 src=           "http://code.angularjs.org/1.1.5/angular.min.js">      </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="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.min.js">      </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>
// Write Javascript code herevar 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'      }  ];
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.
AngularJS-Misc
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Auth Guards in Angular 9/10/11
How to bundle an Angular app for production?
What is AOT and JIT Compiler in Angular ?
Angular PrimeNG Dropdown Component
How to set focus on input field automatically on page load in AngularJS ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?