angular 分页插件
这两天就要要到分页插件了，在家刚好边学习，边把分页插件写了
好了，开始讲解demo
html中关键的一句就是这个了 <div page-link conf="pagedata"></div>
继续看js中的
$scope.pagedata={
url:"aaa.json",
pageSize:10,
currentPage:1,
returnValue:[],
}
这个就是conf的值
通过directive的scope的进行相互绑定
在directive中有进行http请求，具体的请求写法，以及参数的配置要根据实际项目而定。
这里是直接请求json返回数据的。
返回值放在$scope.pagedata.returnValue中的
可以取到这个值[1,3,3]
{
"data": {
"page": {
"page_total": 100,
"page_current": 10
},
"list": [1, 3, 3]
}
}
<!doctype html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<script src="angular.min.js"></script>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.current{
color:red;
}
</style>
</head>
<body>
<div ng-controller="myCtrl">
<div page-link conf="pagedata"></div>
</div>
<script src="pagination.js"></script>
</body>
</html>angular.module('app',[]).controller('myCtrl',function($scope){
$scope.pagedata={
url:"aaa.json",
pageSize:10,
currentPage:1,
returnValue:[],
}
}).directive('pageLink',function($http){
return {
restrict: 'EAMC',
replace: false,
transclude: true,
scope:{
conf:'=conf'
},
template:
'<ul class="paging">' +
'<span class="pagetotal">共<span ng-bind="dataPageCount"></span>条</span>' +
'<li ng-if="hasLastPage"><a ng-click="changePage($event,1)"><<</a></li>' +
'<li ng-if="hasLastPage"><a ng-click="changePage($event,dataPageNo-1)"><</a></li>' +
'<li ng-repeat="pageNumber in pageNumberList" ng-class="{ \'current\': pageNumber === dataPageNo }"><a ng-click="changePage($event,pageNumber)" ng-bind="pageNumber"></a></li>' +
'<li ng-if="hasNextPage"><a ng-click="changePage($event,dataPageNo+1)">></a></li>' +
'<li ng-if="hasNextPage"><a ng-click="changePage($event, dataPageCount)">>></a></li>' +
'<input type="text" ng-model="pageInputNo" />' +
'<button ng-click="pageInputNo <= dataPageCount && changePage($event,pageInputNo)">GO</button>' +
'</ul>',
link: function (scope, element) {
scope.dataUrl = scope.conf.url;
scope.dataStartPage = scope.conf.currentPage || 1;
scope.dataPageNo = scope.currentPage || 1;
scope.pageNumberListLength = 5;
scope.hasLastPage = false;
scope.hasNextPage = false;
//总页数
scope.dataPageCount = 0;
scope.pageNumberList = [];
scope.dataPer = scope.page_size || 10;
//改变页码
scope.changePage = function (e, page, p) {
scope.dataStartPage = page;
scope.pageData ='page_size=' + scope.dataPer + '&page_no='+ page;
$http({//请求个人中心-信息详情接口
url: scope.dataUrl,
data:scope.pageData,
method: 'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(res){
scope.conf.returnValue=res.data.list;
if (res.data.page) {
scope.dataPageCount = parseInt(res.data.page.page_total);
scope.dataPageNo = page;
}
// 总页数为0时
if (scope.dataPageCount === 0) {
scope.hasNextPage = false;
scope.pageNumberList = [];
// 总页数小于等于最大显示页数时
} else if (scope.dataPageCount <= scope.pageNumberListLength) {
scope.hasLastPage = false;
scope.hasNextPage = false;
scope.pageNumberList = []
for (var i = 0; i < scope.dataPageCount; i++) {
scope.pageNumberList.push(i + 1)
}
// 是否还有上一页
if (scope.dataPageNo > 1) {
scope.hasLastPage = true;
} else {
scope.hasLastPage = false;
}
// 是否还有下一页
if (scope.dataPageNo < scope.dataPageCount) {
scope.hasNextPage = true;
} else {
scope.hasNextPage = false;
}
// 总页数大于最大显示页数时
} else if (scope.dataPageCount > scope.pageNumberListLength) {
// 页数小于
var pageNumberListLengthHalf = Math.ceil(scope.pageNumberListLength / 2);
scope.pageNumberList = [];
if (scope.dataPageNo <= pageNumberListLengthHalf) {
for (var i = 0; i < scope.pageNumberListLength; i++) {
scope.pageNumberList.push(i + 1);
}
} else if (scope.dataPageNo > scope.dataPageCount - pageNumberListLengthHalf) {
for (var i = scope.dataPageCount - scope.pageNumberListLength; i < scope.dataPageCount; i++) {
scope.pageNumberList.push(i + 1);
}
} else {
for (var i = scope.dataPageNo - pageNumberListLengthHalf; i < scope.dataPageNo + pageNumberListLengthHalf - 1; i++) {
scope.pageNumberList.push(i + 1);
}
}
// 是否还有上一页
if (scope.dataPageNo > 1) {
scope.hasLastPage = true;
} else {
scope.hasLastPage = false;
}
// 是否还有下一页
if (scope.dataPageNo < scope.dataPageCount) {
scope.hasNextPage = true;
} else {
scope.hasNextPage = false;
}
}
})
};
scope.changePage(null, scope.dataStartPage);
}
}
})- 上一篇 »easyui-datagrid的分页功能
- 下一篇 »php分页查询