AngularJS 表格分页

在AngularJS中没有像ExtJS中那么成熟的表格分页组件，上网搜了一下也没发现比较完善的版本，所以自己动手写了一个，不足之处请指正。废话少说，直接上代码。

Paginator工厂函数如下：

var servicesapp = angular.module('services', []);
servicesapp.factory('Paginator', function() {
	//虽然这是一个服务，但是每次用户调用它时都会获得一个全新的Paginator。这是因为我们会返回一个function，当它被执行时会返回一个对象
	return function(ds) {
		var paginator = {
			hasNextVar : false,
			next: function() {
				if(this.hasNextVar) {
					this.currentOffset += this.pageSize;
					this._load();
				}
			},
			_load: function() {
				/*支持传递数据获取函数和结果集两种方式*/
				if(isFunction(ds)){
					var self = this;
					ds(this.currentOffset, this.pageSize, function(response) {
						self.currentPageItems = response.data;
						self.hasNextVar = (self.currentOffset + self.pageSize) < response.totalCount;
						self.totalCount = response.totalCount;
					});
				}else{
					this.totalCount = ds.length;
					this.currentPageItems = ds.slice(this.currentOffset, this.currentOffset+this.pageSize);
					this.hasNextVar = (this.currentOffset + this.pageSize) < this.totalCount;
				}
			},
			hasNext: function() {
				return this.hasNextVar;
			},
			previous: function() {
				if(this.hasPrevious()) {
					this.currentOffset -= this.pageSize;
					this._load();
				}
			},
			setPageSize: function(){
				this.currentOffset = 0;
				this.pageSize = Number(this.pageSizeShow);
				this._load();
			},
			setPage: function(){
				var maxPage = Math.ceil(this.totalCount/this.pageSize);
				if(this.currentPage > maxPage){
					alert('不能超过最大页数'+maxPage);
					return false;
				}
				this.currentOffset = (this.currentPage - 1) * this.pageSize;
				this._load();
			},
			gotoFirstPage:function(){
				this.currentOffset = 0;
				this._load();
			},
			gotoLastPage:function(){
				this.currentOffset = (this.getTotalpage()-1)*this.pageSize;
				this._load();
			},
			hasPrevious: function() {
				return this.currentOffset !== 0;
			},
			getTotalpage:function(){
				return Math.ceil(this.totalCount/this.pageSize);
			},
			currentPageItems: [],
			currentOffset:0,
			totalCount:0,
			pageSize:10,
			pageSizeShow:"10",
			currentPage:1
		};
		
		//加载第一页
		paginator._load();
		return paginator;
	};
});

指令代码如下：

servicesapp.directive('pager', ['$rootScope', function($rootScope) {
	return {
		restrict: 'A',
		scope:{__paginator:'=pageInstance'},
		template:
		'共{{__paginator.totalCount}}条，每页'+
        '1015203050100'+
        '条 | 当前：{{__paginator.currentOffset/__paginator.pageSize + 1}}/{{__paginator.getTotalpage()}}页，{{__paginator.currentOffset+1}}~{{(__paginator.currentOffset+__paginator.pageSize)>(__paginator.totalCount)?__paginator.totalCount:__paginator.currentOffset+__paginator.pageSize}}条 | '+
        ''+
        ''+
        ''+
        ''+
        ''+
        '',
		link: function(scope, element, attrs) {
		}
	};
}]);

controller代码如下：

var app = angular.module('pagedemo', ['services']);
	app.controller('page1', function($scope, $http, Paginator) {
		$scope.query = 'Testing';
		var fetchFunction = function(offset, limit, callback) {
			$http.get(getActionUrl('fatap/demo/page'), {params:{query:$scope.query, offset: offset, limit: limit}}).success(callback);
		};
		$scope.paginator = Paginator(fetchFunction);
		$scope.paginator2 = Paginator(fetchFunction);
	});

上述代码中Paginator的参数是个获取数据的函数，返回值数据格式如：{totalCount:2, data:[{},{}]}。此外也可以直接传递data字段在前端分页，实现方式见Paginator工厂方法，传递data参数的数据格式如：[{},{}]。

html代码片段如下：

		

		  

			
主机名
			
IPv4-地址
			
MAC-地址
			
剩余租期
		  
		
		

		  

			
{{lease.hostname}}
			
{{lease.ipaddr}}
			
{{lease.macaddr}}
			
{{lease.expires}}
		  
		
	  
      

	   

	   

上述代码中page-instance是和指令定义中的pageInstance相对应的，这个命名方式是采用了驼峰法则的。

本文参考http://bijian1013.iteye.com/blog/2111118，在此表示感谢。