前一阵子,在angular的项目里需要用到页码,虽然找了很多,页码实现的源码。但都不能很好地解决我的需求。
于是,干脆乎,自己写一个页码指令。
hjcr.directive('pagination',function(){
return{
restrict:'E',
scope:{
currentPage:'=',
totalPage:'=',
getRecord:'&'
},
link:function($scope,element,attrs){
},
controller:function($scope, $element, $attrs){
$scope.index = 0;
$scope.pages =[];
$scope.$watch('totalPage',function(){
if($scope.totalPage<=5){
for (var i = 0; i < $scope.totalPage; i++) {
$scope.pages[i] = i+1;
}
}
$scope.$watch('index',function(){
if($scope.totalPage>5){
for (var i = 0; i < 5; i++) {
$scope.pages[i] = $scope.index+i+1;
}
}
})
});
$scope.$watch('currentPage',function(newValue, oldValue){
$scope.currentPage = newValue;
if(newValue!=oldValue){
$scope.getRecord();
}
});
$scope.prev = function(){
if($scope.currentPage>1){
$scope.currentPage--;
if($scope.pages[0]!=1)
{$scope.index--;}
}
}
$scope.next = function(){
if ($scope.currentPage<$scope.totalPage) {
$scope.currentPage++;
if($scope.pages[4] != $scope.totalPage)
{$scope.index++;}
}
}
$scope.toFirst = function(){$scope.currentPage = 1;$scope.index=0;}
$scope.toEnd = function(){$scope.currentPage = $scope.totalPage;$scope.index=$scope.totalPage-5;}
$scope.prevSize = function(){
if($scope.pages[0]-5<1){
$scope.index = 0;
$scope.currentPage = $scope.index+3;
}
else {
$scope.index = $scope.pages[0]-6;
$scope.currentPage = $scope.currentPage-5;
}
}
$scope.nextSize = function(){
if ($scope.pages[4]+5>$scope.totalPage) {
$scope.index = $scope.totalPage-5;
$scope.currentPage = $scope.index+3;
}
else {
$scope.index = $scope.pages[0]+4;
$scope.currentPage = $scope.currentPage+5;
}
}
$scope.jump = function(page){
$scope.currentPage = page;
}
},
template:
'<ul class="pagination" style="margin-top:20px;">'+
'<li ng-click="toFirst()" ng-class="currentPage===1?\'disabled\':\'\'"><a>首页</a></li>'+
'<li ng-show="totalPage>5" ng-click="prevSize()" ng-class="pages[0]===1?\'disabled\':\'\'"><a><i class="fa fa-backward"></i></a></li>'+
'<li ng-click="prev()" ng-class="currentPage===1?\'disabled\':\'\'"><a><i class="fa fa-chevron-left"></i></a></li>'+
'<li ng-click="jump(page)" ng-class="currentPage==page?\'active\':\'\'" ng-repeat="page in pages"><a>{{page}}</a></li>'+
'<li ng-click="next()" ng-class="currentPage===totalPage?\'disabled\':\'\'"><a><i class="fa fa-chevron-right"></i></a></li>'+
'<li ng-show="totalPage>5" ng-click="nextSize()" ng-class="pages[4]===totalPage?\'disabled\':\'\'"><a><i class="fa fa-forward"></i></a></li>'+
'<li ng-click="toEnd()" ng-class="currentPage===totalPage?\'disabled\':\'\'"><a>尾页</a></li>'+
'</ul>'
}
});
使用如下
<pagination ng-if="totalPage>1" current-page="currentPage" total-page="totalPage" get-record="getRecord()">
</pagination>
传入三个参数:当前页码,总页数,调用页码的函数