分页效果：
分页说明
分页使用的样式基于bootstrap样式。
分页模板
<div class="btn-group-sm pull-right"> <button type="button" class="btn btn-default btn-sm" ng-disabled="options.pageNumber==1 || options.pageTotal==0" ng-click="pageChanged('fristPage');"><i class="fa fa-angle-left" ></i></button> <button type="button" class="btn btn-default btn-sm" ng-disabled="options.pageNumber==1 || options.pageTotal==0" ng-click="pageChanged('previousPage');"><i class="fa fa-angle-double-left" ></i></button> <button type="button" class="btn btn-default btn-sm" ng-disabled="options.pageTotal==0" ng-click="pageChanged('refresh');"><i class="fa fa-refresh"></i></button> <button type="button" class="btn btn-default btn-sm" ng-disabled="options.pageNumber==options.pageTotal || options.pageTotal==0" ng-click="pageChanged('nextPage');"><i class="fa fa-angle-double-right" ></i></button> <button type="button" class="btn btn-default btn-sm" ng-disabled="options.pageNumber==options.pageTotal || options.pageTotal==0" ng-click="pageChanged('lastPage');"><i class="fa fa-angle-right" ></i></button> </div> <div class="btn-group pull-left" style="margin-top:5px"> 显示 <span ng-bind="options.pageTotal"></span> 页， <span class="dropup" ng-if="options.pageTotal>0"> 每页 <a href="" data-toggle="dropdown"> <span ng-bind="options.pageSize"></span> <span class="caret"></span> </a>条数据， <ul class="dropdown-menu"> <li ng-repeat="item in options.pageList"> <a href="" ng-bind="item" ng-click="pageSizeChanged(item);"></a> </li> </ul> </span> <span class="dropup" ng-if="options.pageTotal<=0"> 每页<span ng-bind="options.pageSize"></span> 条数据， </span> 当前第 <span ng-bind="options.pageNumber"></span> 页, 共条 <span ng-bind="options.total"></span> 条数据 </div>
分页指令
/** * 分页 * 参数： * options:{ * total:0, * pageList: [10, 20, 30, 50] * } * * onPageChanged:function(type,pageParam){ * * } * */ angular.module('cjhme.pagination', []) .directive('cjhmePagination', [function() { return { scope: { options: '=options', onPageChanged: '&onpagechanged' }, replace: false, templateUrl: 'module/directive/pagination/pagination.html', link: function($scope, $element, $attrs) { var opts = { total: 0, pageList: [10, 20, 30, 50, 100, 150, 200] }; //初始化分页 function initPagination() { if($scope.options && $scope.options.pageList && $scope.options.pageList.length <= 0) { $scope.options.pageList = opts.pageList; } angular.extend(opts, $scope.options); opts.pageSize = opts.pageList[0]; $scope.options = opts; refreshPagination($scope); } //刷新分页 function refreshPagination() { $scope.options.pageTotal = 0; if(parseInt($scope.options.total) % parseInt($scope.options.pageSize) == 0) { $scope.options.pageTotal = parseInt(parseInt($scope.options.total) / parseInt($scope.options.pageSize)); } else { $scope.options.pageTotal = parseInt((parseInt($scope.options.total) / parseInt($scope.options.pageSize)) + 1); } if($scope.options.pageTotal <= 0) { $scope.options.pageNumber = 0; } else { $scope.options.pageNumber = 1; } } //下一页 function nextPage() { $scope.options.pageNumber++; if($scope.options.pageNumber > $scope.options.pageTotal) { $scope.options.pageNumber = $scope.options.pageTotal; } } //上一页 function previousPage() { $scope.options.pageNumber--; if($scope.options.pageNumber <= 0) { $scope.options.pageNumber = 1 } } //最后一页 function lastPage() { $scope.options.pageNumber = $scope.options.pageTotal; } //第一页 function fristPage() { $scope.options.pageNumber = 1; } //分页操作 function onPageChanged(type) { var pageParam = { pageNumber: $scope.options.pageNumber, pageSize: $scope.options.pageSize, pageTotal: $scope.options.pageTotal, total: $scope.options.total } $scope.onPageChanged()(type, pageParam); } //分页改变 $scope.pageChanged = function(type) { switch(type) { case 'nextPage': nextPage(); break; case 'lastPage': lastPage(); break; case 'previousPage': previousPage(); break; case 'fristPage': fristPage(); break; } onPageChanged(type); } //页数改变 $scope.pageSizeChanged = function(curSize) { $scope.options.pageSize = curSize; refreshPagination(); onPageChanged("pageSizeChange"); } $scope.$watch('options', function(newVal, oldVal) { initPagination() }) } }; }]); 分页使用：
html页面使用时：<div cjhme-pagination options="pagerConfig" onPageChanged="pagerChange"></div>
controller中首先引入：cjhme.pagination，使用时配置如下参数：
//分页 $scope.pagerConfig = { total: 30, pageList: [15, 25, 35] } $scope.pagerChange = function(type, pageParam) { console.info(type); console.info(pageParam); }
