基于angularJS的分页功能

先看分页效果图



是基于bootstrap的基本分页效果，样式可以先去查看boostrap文档熟悉。

在以angularJS中，像这种公共组件一般(也应该)写到公共directive中，下面可以下项目中怎么实现的。

①. 公共组件 pageDirective.js

define(['angular'], function(angular) {
　　　　　　　　　　　　　　　　　　　　　　　　　　                     //依赖angularJS，这里用到了requireJS,未使用者自行更改
var directives = angular.module("app.directive",[])         //默认ng-app='app';
directives.directive('pagination',function() {
return {
restrict: 'E',
scope:{
numPages: '=',
currentPage: '=',
pageCalback:"=",
onSelectPage: '&'
},
template:[
'<ul class="pagination">',
'<li class="first" ng-class="{disabled: noPrevious()}">',
'<a ng-click="selectFirst()">首页</a>',
'</li>',
'<li class="prev" ng-class="{disabled: noPrevious()}">',
'<a ng-click="selectPrevious()">上一页</a>',
'</li>',
'<li ng-style="prestyle">',
'<a>...</a>',
'</li>',
'<li ng-repeat="page in pages" ng-class="{active: isActive(page)}">',
'<a ng-click="selectPage(page)">{{page}}</a>',
'</li>',
'<li ng-style="nexstyle">',
'<a>...</a>',
'</li>',
'<li class="next" ng-class="{disabled: noNext()}">',
'<a ng-click="selectNext()">下一页</a>',
'</li>',
'<li class="last" ng-class="{disabled: noNext()}">',
'<a ng-click="selectLast()">尾页</a>',
'</li>',
'</ul>',
].join(''),
replace:true,
link: function(scope) {

scope.prestyle= {display:"none"};
scope.nexstyle= {display:"none"};

scope.$watch('numPages', function(value) {
if(value > 10) {
scope.nexstyle = {display:"block"};
value = 10;
} else {
scope.nexstyle = {display:"none"};
}
scope.pages = [];
for(var i = 1; i <= value; i++) {
scope.pages.push(i);
}
});

scope.isActive = function(page) {
return scope.currentPage === page;
};

scope.noPrevious = function() {
return scope.currentPage === 1;
};

scope.noNext = function() {
return scope.currentPage === scope.numPages;
}

scope.selectPage = function(page) {

if( !scope.isActive(page) ) {

//根据当前页数判断页数显示的逻辑
if( page > 10  ) {
scope.prestyle = {display:"block"};
} else {
scope.prestyle = {display:"none"};
}
//console.log("scope.numPages:---" + scope.numPages);
//console.log("page:---" + page);

if( (scope.numPages - page) > 5 ) {
scope.nexstyle = {display:"block"};
} else {
scope.nexstyle = {display:"none"};
if(page <= 10 && scope.numPages > 10) {
scope.nexstyle = {display:"block"};
}
}
if( page > 10 ) {
scope.pages = [];
if( (scope.numPages - page) > 5 ) {
for(var i = (page-5); i < (page + 5); i++) {
scope.pages.push(i);
}
} else {
for(var i = (scope.numPages - 10); i <= scope.numPages ; i++) {
scope.pages.push(i);
}
}

} else {
scope.pages = [];
for(var i = 1; i <= (10 >= scope.numPages?scope.numPages:10); i++) {
scope.pages.push(i);
}
}

scope.currentPage = page;
scope.onSelectPage({ page: page });
}
};

scope.selectFirst = function() {
if( !scope.noPrevious() ) {
scope.selectPage(1);
}
};

scope.selectPrevious = function() {
if( !scope.noPrevious() ) {
scope.selectPage(scope.currentPage - 1);
}
};

scope.selectNext = function() {
if( !scope.noNext() ) {
scope.selectPage(scope.currentPage + 1);
}
}

scope.selectLast = function() {
if( !scope.noNext() ) {
scope.selectPage(scope.numPages);
}
};

scope.onSelectPage = function(opts) {
var page = opts.page;
scope.pageCalback(page);
}

}
}
})

return directives;
})

　　开看一下如何使用

在controller中

　　

define(['angular','app'],function(){
　　app.controller('name',['$scope'],function(){
$scope.searchClick = 0;

list(1);

$scope.pageCallback = function (page) {
list(page);
};

function list(page) {
if ($scope.searchClick == 0) {
$http.post('/服务器端地址/' + page, {'paramsStr': ""})
.success(function (result) {
if (result && result.code == 200) {
$scope.repayments = result.pageList;
$scope.page.totalPage = result.totalPage;
$scope.page.currentPage = result.currentPage;
console.log('获取页面数据totalPage'+result.totalPage);
console.log('获取页面数据currentPage'+result.currentPage);
}
});
} else {
$http.post('/服务器端地址/' + page, {'paramsStr': JSON.stringify($scope.params)})
.success(function (result) {
if (result && result.code == 200) {
$scope.repayments = result.pageList;
$scope.page.totalPage = result.totalPage;
$scope.page.currentPage = result.currentPage;
console.log('发送页面数据totalPage'+result.totalPage);
console.log('发送页面数据currentPage'+result.currentPage);
}
}).error(function (err) {
console.log(err);
});
}
}
　　　　

　　})

})　　

　　稍微有点乱，解释下，封装了一个list方法，list方法是根据客户端的数据进行显示页面和跳转页面的，看看我们获得到的数据格式：

　　


完美，重点就在几个page开头的数据上，这个就是页面显示和跳转的核心，表示后台在维护逻辑。

如果是用户查找数据，整个数据表重新解构组合，记得设置$scope.searchClick =1，然后依然list(1);他会走post方法

　看看HTML是怎么写的