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:
		'<span>共{{__paginator.totalCount}}条，每页</span>'+
        '<select ng-model="__paginator.pageSizeShow" ng-change="__paginator.setPageSize()"><option value="10">10</option><option value="15">15</option><option value="20">20</option><option value="30">30</option><option value="50">50</option><option value="100">100</option></select>'+
        '<span>条 | 当前：{{__paginator.currentOffset/__paginator.pageSize + 1}}/{{__paginator.getTotalpage()}}页，{{__paginator.currentOffset+1}}~{{(__paginator.currentOffset+__paginator.pageSize)>(__paginator.totalCount)?__paginator.totalCount:__paginator.currentOffset+__paginator.pageSize}}条 | </span>'+
        '<input type="button" value="首页" class="page_link{{__paginator.hasPrevious()?"":"_disable"}}" classname="mlist_page_link" ng-click="__paginator.gotoFirstPage()" ng-disabled="!__paginator.hasPrevious()" />'+
        '<input type="button" value="上一页" class="page_link{{__paginator.hasPrevious()?"":"_disable"}}" classname="mlist_page_link" ng-click="__paginator.previous()" ng-disabled="!__paginator.hasPrevious()"/>'+
        '<input type="button" value="下一页" class="page_link{{__paginator.hasNext()?"":"_disable"}}" classname="mlist_page_link" ng-click="__paginator.next()" ng-disabled="!__paginator.hasNext()"/>'+
        '<input type="button" value="尾页" class="page_link{{__paginator.hasNext()?"":"_disable"}}" classname="mlist_page_link" ng-click="__paginator.gotoLastPage()" ng-disabled="!__paginator.hasNext()" />'+
        '<input type="number" required ng-required ng-model="__paginator.currentPage" min="1" style="width:48px"/>'+
        '<input type="button" class="buttonX" classname="buttonX" value="跳转" ng-click="__paginator.setPage()"/>',
		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代码片段如下：

<table class="mlist" classname="mlist" cellpading="0" cellspacing="0" width="100%">
		<thead>
		  <tr>
			<th width="40%"><span style="font-size: 100%;">主机名</span></th>
			<th width="20%"><span style="font-size: 100%;">IPv4-地址</span></th>
			<th width="25%"><span style="font-size: 100%;">MAC-地址</span></th>
			<th width="15%"><span style="font-size: 100%;">剩余租期</span></th>
		  </tr>
		</thead>
		<tbody>
		  <tr class="row135" ng-repeat="lease in paginator.currentPageItems">
			<td width="40%">{{lease.hostname}}</td>
			<td width="20%">{{lease.ipaddr}}</td>
			<td width="25%">{{lease.macaddr}}</td>
			<td width="15%">{{lease.expires}}</td>
		  </tr>
		</tbody>
	  </table>
      <div>
	   <div align="right" page-instance="paginator" pager>
	   </div>

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

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