Today, We want to share with you angularjs table pagination.In this post we will show you How to do paging in AngularJS?, hear for Paging in AngularJS we will give you demo and example for implement.In this post, we will learn about angularjs smart table with an example.
AngularJS Table Pagination with Ng-Table
Syntax of AngularJS Table with Paginations
$scope.membersTable = new ngTableParams({
page: 1,
count: 5
}, {
total: $scope.members.length,
getData: function ($defer, params) {
$scope.data = $scope.members.slice((params.page() - 1) * params.count(), params.page() * params.count());
$defer.resolve($scope.data);
}
});
Example of AngularJS Table with Paginations
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs Table with Paginations Example - www.pakainfo.com
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css">
<script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>
<script type="text/javascript">
var app = angular.module("ngtableApp", ["ngTable"]);
app.controller("ngtableCtrl", function ($scope, ngTableParams) {
$scope.members = [
{ name: "Raghav Chanagani", age: 10, location: 'Rajkot' },
{ name: "Mayur Sorathiya", age: 30, location: 'Surat' },
{ name: "Virat Antala", age: 29, location: 'Surat' },
{ name: "Bhavika Kumar", age: 25, location: 'Kalavad' },
{ name: "Shital Chandra", age: 27, location: 'Gondal' },
{ name: "Krishna Prasad", age: 38, location: 'Rajkot' },
{ name: "Surbhi Rayana", age: 25, location: 'Junagdh' },
{ name: "Madhuri Dixit", age: 7, location: 'Rajkot' },
{ name: "Geeta Sorathiya", age: 22, location: 'Delhi' },
{ name: "Dharmesh Sorathiya", age: 23, location: 'California' },
{ name: "Nilesh Sorathiya", age: 34, location: 'Ahemdabad' },
{ name: "Chaggan Krishna", age: 29, location: 'Sugama' },
{ name: "Ketu dharmi", age: 19, location: 'Guntur' },
{ name: "Lila", age: 27, location: 'Gondal' }
];
$scope.membersTable = new ngTableParams({
page: 1,
count: 5
}, {
total: $scope.members.length,
getData: function ($defer, params) {
$scope.data = $scope.members.slice((params.page() - 1) * params.count(), params.page() * params.count());
$defer.resolve($scope.data);
}
});
});
</script>
</head>
<body ng-app="ngtableApp">
<div ng-controller="ngtableCtrl">
<h2>AngularJS ng-table Paginations Example - www.pakainfo.com</h2>
<table ng-table ="membersTable" class="table table-striped">
<tr ng-repeat="member in data">
<td data-title="'Name'">{{member.name}}</td>
<td data-title="'Age'">{{member.age}}</td>
<td data-title="'Location'">{{member.location}}</td>
</tr>
</table>
</div>
</body>
</html>
I hope you get an idea about Paginations in HTML table using AngularJS.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.