angularjs分页

var routerApp = angular.module('routerApp', ['routerApp.paging']);

/**
 * 公共分页
 */
angular.module('routerApp.paging', [])
/***
 *   html
 *   <div id="history" class="page r">
 *   ==============页面触发事件查询js=============start====
 *   直接调用loadData(scope,data,params);
 *   参数：scope:$scope
 *       data:前台分页DTO
 *       params:定义了  
 *          indexCss:"display:none;",//选填
 *			liCss:"border:none;",//li的样式设置  选填
 *			endCss:"display:none;",//尾页样式设置 选填
 *			prev:"<",//上一页可自定义 选填
 *			next:">",//下一页自定义 选填
 *			totalCss:"display:none;",//总页数样式设置 选填
 *			pageId:pageId,//对应页面的div id  必填 
 *			method:"queryHistoricalnet",//用于点击分页按钮时调用的函数名 动态分页必填
 *			listType:'data',//需要展示的数组类型 选填
 *			pageSize:10,//每页展示条数 选填
 *			pageCount:5,//页码个数 选填
 *			pageType:2//分页类型：1 动态分页 2 静态分页 (如果不填则是1) 静态分页必填
 *   ==============页面触发事件查询js=============end====      
 */
.factory("pageService",function($parse){
	return {
		loadData:function(scope,data,params){
			loadData(scope,data,params);
		}
	};
	//查询数据
	function loadData(scope,data,params){
		if(!data){
			return;
		}
		//设置参数
		if(params){
			setParams(data,params);
		}
		//清除之前的分页内容
		$("#"+data.pageId).children().remove();
		$("#"+data.pageId).addClass("r");
		if(!data[data.listType] || data[data.listType]=="null" ||  data[data.listType].length==0){
			data[data.listType] = {};
			$("#"+data.pageId).append($("<span> 没有查询到相应的数据</span>"));
			$("#"+data.pageId).removeClass("r");
			return;
		}
		var pageSpan=$("#pageId_"+data.pageId);
		pageSpan=$('<ul id="pageId_'+data.pageId+'"></ul>');
		$("#"+data.pageId).append(pageSpan);
		//点击页码分页事件
		event(scope,data);
		
		
		var totalPages = "";//总页数
		/*
		 * 判断是静态分页还是静态分页
		 * 默认是动态分页或者等于1时是动态分页
		 * 2 为静态分页
		*/
		if(data.pageType && "2"==data.pageType && data.tempArr.length==0){
			var dataList = data[data.listType];
			if(dataList && dataList.length>0){
				if(dataList.length%data.pageSize==0){
					totalPages = data.totalPages = dataList.length/data.pageSize;
				}else{
					totalPages = data.totalPages = parseInt(dataList.length/data.pageSize) + 1;
				}
				//将数组拆分成totalPages个
				data.tempArr = getNewArray(dataList,data.pageSize);
				data[data.listType]=[];
				for (var j = 0; j < data.tempArr[0].length; j++) {
					data[data.listType].push(data.tempArr[0][j]);
				}
			}
		}else{
			totalPages = data.totalPages;
		}
		if(totalPages<data.pageCount){
    		data.pageCount = totalPages;
    	}
	    setPageNumber(data);
		var pageText="<li class='indexCSS' style='"+data.totalCss+"'>共 <span style='color:red;'>"+totalPages+"</span> 页</li>";
		//动态定义分页所需元素
		pageText+="<li tag='"+1+"' style='"+data.indexCss+"'>首页</li>";
		pageText+="<li tag='"+(data.currentPage-1)+"' style='"+data.liCss+"'>"+data.prev+"</li>";
		for (var i = 0; i < data.pageNumber.length; i++) {
			if(data.pageNumber[i]==data.currentPage){
				pageText=pageText+'<li tag="'+data.pageNumber[i]+'" class="selected" style="'+data.liCss+'">'+data.pageNumber[i]+'</li>';
			}else{
				pageText=pageText+'<li tag="'+data.pageNumber[i]+'" style="'+data.liCss+'">'+data.pageNumber[i]+'</li>';
			}
		}
		pageText+="<li tag='"+(data.currentPage+1)+"' style='"+data.liCss+"'>"+data.next+"</li>";
		pageText+="<li tag='"+data.totalPages+"' style='"+data.endCss+"'>尾页</li>";
		pageSpan.append(pageText);
		if(totalPages==1){
			$("#"+data.pageId).children().remove();
		}
		
	};
	function event(scope,obj){
		$("#pageId_"+obj.pageId).bind('click',function(e){
			e = e || window.event;
	        var target = e.target || e.srcElement;
	        // 不是<li>标签就返回
	        if(target.nodeName !== 'LI' || $(target).hasClass("indexCSS")) {
	            return;
	        }
	        var tag = parseInt($(target).attr("tag"));
	        if(tag==0||tag==obj.totalPages+1){
	        	return;
	        }
	        obj.currentPage = tag;
	        if(obj.pageType && "2"==obj.pageType){
	        	scope.$apply(function() {
		        	obj[obj.listType] = [];
		        	for (var i = 0; i < obj.tempArr[obj.currentPage-1].length; i++) {
		        		obj[obj.listType].push(obj.tempArr[obj.currentPage-1][i]);
					}
		        	loadData(scope,obj);
	        	});
	        }else{
	        	scope.$apply(function() {
	        		var getter = $parse(obj.method);
					getter(scope);
	            });
	        }
	        if(typeof e.preventDefault === 'function') {
	        	e.preventDefault();
	        	e.stopPropagation();
	        }else {
	        	e.returnValue = false;
	        	e.cancelBubble = true;
	        }
		});
	}
	/**
	 *将数组分割成新的数组[二维数组]
	 *@param myArray 需要分割的数组
	 *@param size    分割每个子数组的长度
	 */
	function getNewArray(myArray,size){
	  var len=parseInt(myArray.length/size);
	  var remain=myArray.length%size;
	  var my_array=[],sot=remain>0?len+1:len; 
	  for ( var f = 1; f <=sot; f++) {
	    var start=size*(f-1);
	    var end=(f>len)?((f-1)*size+remain):f*size;
	    var mylocates=myArray.slice(start,end);
	    my_array.push(mylocates);
	  }
	 return my_array;
	}
	function setPageNumber(data){
		data.pageNumber = new Array();//页码
		if(data.currentPage<=data.totalPages-data.pageCount){
			for (var i = 0; i < data.pageCount; i++) {
				data.pageNumber[i]= data.currentPage+i;
			};
		}else{
			for (var i = data.pageCount-1; i >= 0; i--) {
				data.pageNumber.push(data.totalPages-i);
			};
		}
	}
	//参数设置
	function setParams(data,params){
		data.tempArr = new Array();//静态分页专用：临时数组
		data.pageSize=params && params.pageSize?params.pageSize:10;
		data.pageCount=params && params.pageCount && params.pageCount>0 && params.pageCount<10 ? params.pageCount:5;
		data.pageType=params && params.pageType ? params.pageType:1;
		data.listType =params &&  params.listType ? params.listType : "data";
		data.pageId = params.pageId;
		data.currentPage = data.currentPage ? data.currentPage : 1;
		data.method = params && params.method ? params.method : "";
		//样式赋值
		data.liCss = params && params.liCss ? params.liCss : "";
		data.indexCss = params && params.indexCss ? params.indexCss : "";
		data.endCss = params && params.endCss ? params.endCss : "";
		data.totalCss = params && params.totalCss ? params.totalCss : "";
		data.prev = params && params.prev ? params.prev : "上一页";
		data.next = params && params.next ? params.next : "下一页";
	}
});

/*前端分页*/
.page {padding-bottom: 5px;}
.page li{padding: 4px 10px;font-size: 14px; border: 1px solid #d2d2d2; float: left; margin-right: 10px;cursor:pointer}
.page li.selected{ color: #ff6600;border: 1px solid #fff}
.page .indexCSS{padding: 4px 10px;font-size: 14px; float: left; border: none;cursor:default;}