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, 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);

	}