首页 > 代码库 > angular 分页插件
angular 分页插件
这两天就要要到分页插件了，在家刚好边学习，边把分页插件写了
具体的github demo地址
好了，开始讲解demo
html中关键的一句就是这个了 <div page-link conf="pagedata"></div>
继续看js中的
$scope.pagedata=http://www.mamicode.com/{ 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=http://www.mamicode.com/"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=http://www.mamicode.com/"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); } }})
angular 分页插件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。