Pagination In Angularjs Example
Last Updated : Mar 11, 2024
IN - Angular JS | Written & Updated By - Pragati
In this tutorial we will show you the solution of pagination in angularjs example, here we created json array with more details then we printed json data on html table.
We separated table by datas as paging using bootstrap tpls link supports.
Each page contain three sets of data in table we can see. In controller we defined each page links and information so we can move to every page.
Step By Step Guide On Pagination In Angularjs Example :-
In our application we defined our app and controller with html table with respect to json data for showing result of pagination on webpage.
Our json data has three set of information so we created three columns with row respect to data length and using ‘ng-repeat’ directive we printing json data to table each rows.
In last we defined <div> tag for append paging options.
In controller we defined our application with ‘ui.bootstrap’ array declaration to make table pagination on webpage.
Then we calculating overall pages and separating to make each page options for move each page like pagination initially we sets each page contain 3 rows of data in table will display.
Finally we declared our json array information about ‘course’.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Pagination</title>
<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>
<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
<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',
},
{ courseCode : 1002,
courseName : 'Software Technology',
courseDescription :'Alpha testing, Beta testing, Integration testing, Black box testing',
},
{ courseCode : 1003,
courseName : 'Theory Of Computation',
courseDescription : 'FSM, PDA, TM',
},
{ courseCode : 1004,
courseName : 'Algorithm',
courseDescription : 'Greedy algorithms, Dynamic Programming, Sorting',
},
{ courseCode : 1005,
courseName : 'Networking',
courseDescription : 'IP',
},
{courseCode : 1006,
courseName : 'Database',
courseDescription : 'Indexing, B and B+ trees, SQL',
},
{ courseCode : 1007,
courseName : 'Programming',
courseDescription : 'C, C++, JAVA, Python',
},
{ courseCode : 1008,
courseName : 'Data structure',
courseDescription : 'Tree, Graph',
},
{ courseCode : 1009,
courseName : 'Operating Systems',
courseDescription : 'CPU Scheduling, Memory Managment, Disk Management',
},
{ courseCode : 1010,
courseName : 'Compiler',
courseDescription : 'Top down parsing, Bottom up Parsing',
}
];
</script>
</head>
<h1 style="color: green;" ;>Pagination With Course Details</h1>
<body ng-controller="ListController as list">
<table border="1">
<thead>
<tr>
<th>COURSE CODE</th>
<th>COURSE NAME</th>
<th>COURSE DESCRIPTION</th>
</tr>
</thead>
<tr ng-repeat="item in filteredItems">
<td>{{item.courseCode}}</td>
<td>{{item.courseName}}</td>
<td>{{item.courseDescription}}</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>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- This file contains angularjs is distributed as a javascript file and must added to webpage by using <script> tag. The imported bootstrap ‘tpls’ file is must because it can only show the result properly. For styles we used boostrap so we imported bootstrap minified file.
- In controller we created ‘app’ variable used to store our application ‘myapp’ with array of bootstrap tpls and in application we need to append controller ‘ctrl’ to the application ‘app’ variable for access all elements values.
- We defined our function with parameters of $scope object, here using $scope object we sets variables ‘curPage’ value to ‘1’, ‘itemsPerPage’ value to ‘3’, ‘maxSize’ value to ‘5’ and itemsDetails array values stored to items.
- In ‘numOfPages’ function we separating each page from total pages then we returns.
- Then using ‘$watch’ service we defined function to sets ‘begin,end, filteredItems’ variable values. We defined json array detailed with three keys ‘courseCode, courseName, courseDescription’ respective different values.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contains coding of entire website blocks and elements described here. In html we defined application ‘myApp’ and controller ‘ListController’ defined in body using directives of ‘ng-app,ng-controller’.
- Within body we created table with three columns headers ‘COURSE CODE, COURSE NAME, COURSE DESCRIPTION’. Using ‘ng-repeat’ directive we can collects all data from json array once then printed on respective table columns and row will added by json data length.
- Finally pagination options defined to move each page so we can see all page details.
- Both </body> ,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to create pagination using angularjs.
When we executing angularjs file some of those needs internet connection because we used some external library supports so we need to use internet connection when you’re facing problems.
In our program when user executing on browser it will display table with information of course json array data below that we provide other page links so we can move to another page.
We can create our own json array with differen information also like employee detail, author details or company details,..etc.
I hope this tutorial on pagination in angularjs example helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
