angularjs 分页指令编写

分页效果：

分页说明

分页使用的样式基于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,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);

	}