In the below code we have seen the searching and sorting for the table, Here we can see how to paginate the table.
In order to paginate the table we have to create write dir-paginate instead of ng-repeat, we have to write paginate.js file in the script by following below link.
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination.
In the above link copy the dir-paginate.js file and add in the script.js ,
write the table values as
<tr dir-paginate="record in records | orderBy:sortType:sortReverse | filter: 'myFilter' |itemsPerPage:5">
<td>{{ record.Id }}</td>
<td>{{ record.Name }}</td>
<td>{{ record.Country }}</td>
<td>{{ record.Salary }}</td>
<td>{{ record.Age }}</td>
</tr>
<dir-pagination-controls max-size="5"
direction-links="true"
boundary-links="true">
</dir-pagination-controls>
var app = angular.module("angularTable", ['angularUtils.directives.dirPagination']);
app.controller("listdata", function ($scope) {
$scope.sortType = 'Name';
$scope.sortReverse = false;
$scope.records = [
{
"Id": "1",
"Name": "John",
"Country": "America",
"Salary": "One",
"Age": "24"
},
{
"Id": "2",
"Name": "Ram",
"Country": "India",
"Salary": "Two",
"Age": "27"
},
{
"Id": "3",
"Name": "Raju",
"Country": "India",
"Salary": "Three",
"Age": "26"
},
{
"Id": "4",
"Name": "Ravi",
"Country": "India",
"Salary": "Four",
"Age": "31"
},
{
"Id": "5",
"Name": "Raghu",
"Country": "India",
"Salary": "Five",
"Age": "35"
},
{
"Id": "6",
"Name": "Ravan",
"Country": "India",
"Salary": "Six",
"Age": "33"
},
{
"Id": "7",
"Name": "Samy",
"Country": "India",
"Salary": "Seven",
"Age": "30"
},
{
"Id": "8",
"Name": "samuel",
"Country": "India",
"Salary": "Eight",
"Age": "30"
},
{
"Id": "9",
"Name": "sony",
"Country": "India",
"Salary": "Eight",
"Age": "31"
},
{
"Id": "10",
"Name": "Gopal",
"Country": "India",
"Salary": "Eight",
"Age": "32"
},
{
"Id": "11",
"Name": "Gopi",
"Country": "India",
"Salary": "Eight",
"Age": "33"
},
{
"Id": "12",
"Name": "Govind",
"Country": "India",
"Salary": "Eight",
"Age": "34"
},
{
"Id": "13",
"Name": "rohit",
"Country": "India",
"Salary": "Eight",
"Age": "35"
},
{
"Id": "14",
"Name": "suri",
"Country": "India",
"Salary": "Eight",
"Age": "36"
},
{
"Id": "15",
"Name": "prashanth",
"Country": "India",
"Salary": "Eight",
"Age": "37"
},
{
"Id": "16",
"Name": "george",
"Country": "India",
"Salary": "Eight",
"Age": "38"
}
];
});