Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
</head>
<body ng-app="myApp" ng-controller="ctr1" class="container" style="margin-top: 100px;">
<p>The number of <input type="text" ng-model="pagenum" ng-blur="getPages(1)"/> displayed on each page</p>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="v in data">
<td>{{v.id}}</td>
<td>{{v.name}}</td>
</tr>
</tbody>
</table>
<ul class="pagination">
<li ng-class="{disabled:1==page}"><a href="#" ng-click="getPages(page-1<1?1:page-1)">«</a></li>
<li ng-repeat="item in pages" ng-class="{active:item==page}"><a href="#" ng-click="getPages(item)" >{{item}}</a></li>
<li ng-class="{disabled:totalPages==page}"><a href="#" ng-click="getPages(page+1>totalPages?totalPages:page+1)">»</a></li>
</ul>
<script>
var data=[{id:1,name:'name1'},{id:2,name:'name2'},{id:3,name:'name3'},{id:4,name:'name4'},{id:5,name:'name5'},{id:6,name:'name6'},{id:7,name:'name7'},{id:8,name:'name8'}
,{id:9,name:'name9'},{id:10,name:'name10'},{id:11,name:'name11'},{id:12,name:'name12'},{id:13,name:'name13'},{id:14,name:'name14'},{id:15,name:'name15'},{id:16,name:'name16'}
,{id:17,name:'name17'},{id:18,name:'name18'},{id:19,name:'name19'},{id:20,name:'name20'},{id:21,name:'name21'},{id:22,name:'name22'},{id:23,name:'name23'},{id:24,name:'name24'}
,{id:25,name:'name25'},{id:26,name:'name26'},{id:27,name:'name27'},{id:28,name:'name28'},{id:29,name:'name29'},{id:30,name:'name30'},{id:31,name:'name31'},{id:32,name:'name32'}
];
var app = angular.module ('myApp', []);
function getPages(currentpage,firstPage,endPage,pageNum){
var pages = [];
console.log("f:"+firstPage);console.log("e:"+endPage);
for(var i=firstPage;i<=endPage;i++){
pages.push(i);
}
console.log(pages);
return pages;
}
app.controller('ctr1',function($scope){
var size = data.length;
$scope.pagenum = 5
$scope.getPages = function(page){
$scope.totalPages = size%$scope.pagenum==0?(size/$scope.pagenum):Math.ceil(size/$scope.pagenum);
var firspage=0,endpage=0;
if(page<$scope.pagenum){
firspage = 1;
endpage = $scope.pagenum>$scope.totalPages?$scope.totalPages:$scope.pagenum;
}else{
var index = $scope.totalPages-page;
if(index<($scope.pagenum-1)){
firstpage = $scope.totalPages-($scope.pagenum-1);
endpage = $scope.totalPages;
}else{
firspage = page-(Math.ceil($scope.pagenum/2));
endpage = page+(Math.ceil($scope.pagenum/2));
}
}
$scope.pages = getPages(0,firspage,endpage,$scope.pagenum);
$scope.page = page;
var indexS = ($scope.page-1)*$scope.pagenum;
var indexE = parseInt(indexS)+parseInt($scope.pagenum);
var indexEnd = indexE>data.length?data.length:indexE;
var tableD = []
for(var s=indexS;s<indexEnd;s++){
tableD.push(data[s]);
}
$scope.data = tableD;
}
$scope.getPages(1);
});
</script>
</body>
</html>