AngularJS Pagination using dirPagination Directive Example

By Hardik Savani November 5, 2023 Category : Bootstrap Angular

Angularjs Pagination is not simple like laravel, code php etc, because we have to manage it with JS. In this tutorial i give you to build simple way pagination in your angularjs application.

In this example we will use dirPagination directive to add paginate. Pagination Directive provide us very simple way to create paginate like set itemsPerPage, dir-pagination-controls etc. In this example you can see how it simple. You can get more information about Pagination Directive from here : Click Here.

If you don't know more about angularjs then also you can perform simply, I added one html file and another for json data, so create html file and put bellow code and another create json file and put that code and check you can also check demo.

index.html

<html lang="en-US" >

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://raw.githubusercontent.com/michaelbromley/angularUtils/master/src/directives/pagination/dirPagination.js"></script>

<body>

<div ng-app="myApp">

	<h2 class="text-center">AngularJS Pagination Example</h2>

    <div class="container" ng-controller="categoryCtrl">
		<table class="table table-bordered">
		    <thead>
				<tr>
					<th>Category</th>
				</tr>
		    </thead>
			<tbody>
				<tr dir-paginate="value in data | itemsPerPage: 5">
					<td>{{ value.category }}</td>
				</tr>
			</tbody>
		</table>
		<dir-pagination-controls 
			boundary-links="true" 
			direction-links="true" >
			</dir-pagination-controls>
	</div>

</div>

<script>
var app = angular.module('myApp',['angularUtils.directives.dirPagination']);

app.controller('categoryCtrl', ['$scope','$http', function($scope, $http){
    $scope.data = [];
    $http.get("category.json").success(function(response){ 
        $scope.data = response;
    });
}]);
</script>

</body>
</html>

category.json

Read Also: PHP AngularJS Add Remove Input Fields Dynamically Example
[
	{
		"category"	: 	"PHP"
	},
	{
		"category"	: 	"Laravel"
	},
	{
		"category"	: 	"Bootstrap"
	},
	{
		"category"	: 	"JQuery"
	},
	{
		"category"	: 	"Javascript"
	},
	{
		"category"	: 	"HTML"
	},
	{
		"category"	: 	"CSS"
	},
	{
		"category"	: 	"Facebook API"
	},
	{
		"category"	: 	"Packages"
	},
	{
		"category"	: 	"AngularJS"
	},
	{
		"category"	: 	"JS"
	},
	{
		"category"	: 	"Examples"
	},
	{
		"category"	: 	"API"
	},
	{
		"category"	: 	"Bootbox"
	},
	{
		"category"	: 	"Plugin"
	},
	{
		"category"	: 	"Node JS"
	},
	{
		"category"	: 	"Mailchimp API"
	},
	{
		"category"	: 	"Google API"
	}
]

Tags :
Previous

Bootstrap Year Picker using Datepicker JS Example
Next

How to Remove Key from Array in Laravel?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares