Dynamic Pagination In Angularjs
Last Updated : Mar 11, 2024
IN - Angular JS | Written & Updated By - Dikshita
In this tutorial we will show you the solution of dynamic pagination in angularjs, here we created json array with more details then we printed json data on html table and also using filter we can filter our data by branch wise or category wise.
We separated lists of data as paging using bootstrap tpls link supports. Each page contains eight lists of data we can see.
In controller we defined each page links and information so we can move to every page then defined filter function for filtering data from json array.
Step By Step Guide On Dynamic Pagination In Angularjs :-
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 eight set of information so we created unordered list of data and using ‘ng-repeat’ directive we printing json data to lists of data.
In html block we defined three sets of filtering and last added pagination options.
In controller we defined our application with ‘ui.bootstrap’ array declaration to make lists of pagination on webpage.
We declared our json array with some information and we added branch, category for filtering those added block data when we clicks on that particular filter.
Then we calculating overall pages and separating to make each page options for move each page like pagination initially we sets each page contain 8 lists of data will display on webpage.
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Dynamic Pagination Filtering</title>
<!-- JS Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js" ></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js" ></script>
<link rel="stylesheet" ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
</head>
<body>
<div ng-controller="PageCtrl">
<div ng-controller="PageCtrl">
<label>Search:</label><input type="text" ng-model="search.name" placeholder="Search" />
<br />
<label>Filter by Category:</label>
<ul>
<li><a href="" ng-click="search.category='engineering'">Engineering</a></li>
<li><a href="" ng-click="search.category='management'">Management</a></li>
<li><a href="" ng-click="search.category='business'">Business</a></li>
</ul>
<label>Filter by Branch:</label>
<ul>
<li><a href="" ng-click="search.branch='West'">West</a></li>
<li><a href="" ng-click="search.branch='East'">East</a></li>
</ul>
<p><strong><a href="" ng-click="resetFilters()">Show All</a></strong></p>
<h1>Items</h1>
<ul>
<li ng-repeat="item in filtered = items | filter:search | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">{{item.name}}</li>
</ul>
<pagination page="currentPage" max-size="noOfPages" total-items="totalItems" items-per-page="entryLimit"></pagination>
</div>
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.filter('startFrom', function () {
return function (input, start) {
if (input) {
start = +start;
return input.slice(start);
}
return [];
};
});
app.controller('PageCtrl', ['$scope', 'filterFilter', function ($scope, filterFilter) {
$scope.items = [{
"name": "name 1",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "West"
}, {
"name": "name 2",
"category": [{
"category": "engineering"
}],
"branch": "West"
}, {
"name": "name 3",
"category": [{
"category": "management"
}, {
"category": "engineering"
}],
"branch": "West"
}, {
"name": "name 4",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "West"
}, {
"name": "name 5",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "East"
}, {
"name": "name 6",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "East"
}, {
"name": "name 7",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "East"
}, {
"name": "name 8",
"category": [{
"category": "business"
}],
"branch": "West"
}, {
"name": "name 9",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "East"
}, {
"name": "name 10",
"category": [{
"category": "management"
}],
"branch": "East"
}, {
"name": "name 11",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "East"
}, {
"name": "name 12",
"category": [{
"category": "engineering"
}],
"branch": "West"
}, {
"name": "name 13",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "West"
}, {
"name": "name 14",
"category": [{
"category": "engineering"
}],
"branch": "East"
}, {
"name": "name 15",
"category": [{
"category": "management"
}, {
"category": "engineering"
}],
"branch": "East"
}, {
"name": "name 16",
"category": [{
"category": "management"
}],
"branch": "West"
}, {
"name": "name 17",
"category": [{
"category": "management"
}],
"branch": "East"
}, {
"name": "name 18",
"category": [{
"category": "business"
}],
"branch": "West"
}, {
"name": "name 19",
"category": [{
"category": "business"
}],
"branch": "West"
}, {
"name": "name 20",
"category": [{
"category": "engineering"
}],
"branch": "East"
}, {
"name": "Peter",
"category": [{
"category": "business"
}],
"branch": "East"
}, {
"name": "Frank",
"category": [{
"category": "management"
}],
"branch": "East"
}, {
"name": "Joe",
"category": [{
"category": "business"
}],
"branch": "East"
}, {
"name": "Ralph",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "East"
}, {
"name": "Gina",
"category": [{
"category": "business"
}],
"branch": "East"
}, {
"name": "Sam",
"category": [{
"category": "management"
}, {
"category": "engineering"
}],
"branch": "East"
}, {
"name": "Britney",
"category": [{
"category": "business"
}],
"branch": "West"
}];
// create empty search model (object) to trigger $watch on update
$scope.search = {};
$scope.resetFilters = function () {
// needs to be a function or it won't trigger a $watch
$scope.search = {};
};
// pagination controls
$scope.currentPage = 1;
$scope.totalItems = $scope.items.length;
$scope.entryLimit = 8; // items per page
$scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);
// $watch search to update pagination
$scope.$watch('search', function (newVal, oldVal) {
$scope.filtered = filterFilter($scope.items, newVal);
$scope.totalItems = $scope.filtered.length;
$scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);
$scope.currentPage = 1;
}, true);
}]);
</script>
</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 ‘PageCtrl’ to the application ‘app’ variable for access all elements values.
- We defined our function with parameters of ‘$scope, filterFilter’ object, here using $scope object we defined array ‘items’ within array we defined another array ‘category’ in last we added ‘branch’ with values for filter items.
- Using $scope object we declared empty search object to trigger $watch service. Then we sets pagination controls ‘currentPage’ to value ‘1’, ‘totalItems’ to value ‘total length’, ‘entryLimit’ to value ‘8’ and ‘noOfPages’ to value of current page number identified by calculating ($scope.totalItems / $scope.entryLimit) then result take it as whole digit.
- Finally we used $watch object to update paging controls of each 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 ‘PageCtrl’ defined in body using directives of ‘ng-app,ng-controller’.
- Within controller <div> we defined search input field here we used ng-model directive with value we appends search service to collect user searched items from array.
- Then we defined lists based on category with link to show filtered category items as a result on webpage. Those are filtered by ‘ng-click’ directive with search service so it will search user clicked category on json array. So it filtered those items only from array then displayed on list.
- Same as above another filter here filtered by branch values from json array. The ‘Show All’ link will calls ‘resetFilters()’ function to display first page of array values.
- After that we displayed all json array values appends to list displayed using ‘ng-repeat’ directive. Finally we defined pagination controls to move another page.
- 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 dynamic 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 search input fields and filtering options either by category or branch wise and below that we provide other page links so we can move to another page.
When user clicks on categories or branches it shows respective results only. When searching items on search field it shows filtered items on webpage.
I hope this tutorial on dynamic pagination in angularjs helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
