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.
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.