Pagination in angularjs

Tsurendra690-29180
Posted by Tsurendra690-29180 under AngularJS category on | Points: 40 | Views : 519
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"
}
];
});

Comments or Responses

Login to post response