对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下,我们的数据会比较多,无法很好地显示在单个页面中。在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能。现在在学习angular,使用angularjs 分页,基于 directive 实现,样式使用的 bootstrap,直接在 html代码中加入 标签即可调用。
先来看下效果图
实例代码
1 app.directive('pagePagination', function(){ 2 return { 3 restrict : 'E', 4 template : '<div class="pagination-box"><ul class="pagination"><li ng-class="page.style" ng-repeat="page in pageList"><a href="{{ page.link }}">{{ page.name }}</a></li></ul><ul class="pagination" ng-if="pageList[0]"><li class="page-count disabled"><span>共 <b>{{ pageRecord }}</b> 条记录 / 共 <b>{{ pageCount }}</b> 页</span></li></ul></div>', 5 replace : true, 6 scope : { 7 "pageId" : "=", 8 "pageRecord" : "=", 9 "pageSize" : "=", 10 "pageUrlTemplate" : "=" 11 }, 12 controller : ['$scope', function($scope){ 13 14 $scope.getLink = function(pageId){ 15 return $scope.pageUrlTemplate.replace("{PAGE}", pageId); 16 }; 17 18 $scope.getPageList = function(){ 19 var page = []; 20 var firstPage = parseInt(( $scope.pageId - 1 ) / $scope._pageSize ) * $scope._pageSize + 1; 21 page.push({ 22 name : '首页', 23 style : $scope.pageId == 1 ? "disabled" : "", 24 link : $scope.getLink(1) 25 }); 26 page.push({ 27 name : '上一页', 28 style : $scope.pageId == 1 ? "disabled" : "", 29 link : $scope.getLink(1) 30 }); 31 for( var pageId = firstPage; pageId < firstPage + 10; pageId ++){ 32 if( pageId >= 1 && pageId <= $scope.pageCount ){ 33 page.push({ 34 name : pageId, 35 link : $scope.getLink(pageId), 36 style : pageId == $scope.pageId ? "active" : "" 37 }); 38 } 39 } 40 page.push({ 41 name : '下一页', 42 style : $scope.pageId == $scope.pageCount ? "disabled" : "", 43 link : $scope.getLink($scope.pageCount) 44 }); 45 page.push({ 46 name : '尾页', 47 style : $scope.pageId == $scope.pageCount ? "disabled" : "", 48 link : $scope.getLink($scope.pageCount) 49 }); 50 return page; 51 }; 52 53 $scope.pageInit = function(){ 54 if( !$scope.pageId || !$scope.pageRecord ){ 55 setTimeout(function(){ 56 $scope.$apply(function(){ 57 $scope.pageInit(); 58 }); 59 }, 10); 60 }else{ 61 if( !!$scope.pageSize ){ 62 $scope._pageSize = parseInt($scope.pageSize); 63 }else{ 64 $scope._pageSize = 10; 65 } 66 $scope.pageId = parseInt($scope.pageId); 67 $scope.pageCount = parseInt(( $scope.pageRecord - 1 ) / $scope._pageSize ) + 1; 68 if( $scope.pageId < 1 ){ 69 $scope.pageId = 1; 70 }else if( $scope.pageId > $scope.pageCount ){ 71 $scope.pageId = $scope.pageCount; 72 } 73 $scope.pageLoad = true; 74 $scope.pageList = $scope.getPageList(); 75 } 76 }; 77 78 $scope.pageLoad = false; 79 $scope.pageInit(); 80 }] 81 } 82 });
调用代码:
1 <page-pagination 2 page-id="pageId" 3 page-record="recordCount" 4 page-url-template="urlTemplate"> 5 </page-pagination>
以上就是angular.js分页代码的全部内容,希望对大家的学习有所帮助。