标签：页码 orm ast page app title astar next http
这两天就要要到分页插件了，在家刚好边学习，边把分页插件写了
好了，开始讲解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 lang="en" 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); } } })
标签：页码 orm ast page app title astar next http
原文地址：http://www.cnblogs.com/heyinwangchuan/p/6691650.html
