使用Ajax+JQuery构造分页查询列表

以前一直是用EASYUI来完成分页查询，这次有前台页面需要分页，于是自己手动写了个分页代码，新手可参考下。

第一步我把JQUERY的AJAX请求封装了下，设置了很多默认参数 ，代码如下：

function Ajax(parament){
	$.ajax({
		 type:parament.type?parament.type:"post",
		 url:parament.url,
		 data:parament.data,
		 timeout:parament.timeout?parament.timeout:60000,
		 dataType:parament.dataType?parament.dataType:'json',
		 async:parament.async!=undefined?parament.async:true,
		 beforeSend:function(XMLHttpRequest){
     	   if(parament.beforeSend)
     		   parament.beforeSend(XMLHttpRequest);
        },
		 success:function(data){
			parament.success(data);
		 },
		 error:function(response,error,exception){
			 if(parament.error)
				 parament.error(request,error,exception);
			 if(response.status=='timeout'){
				 alert("ajax error,timeout!");
			 }else
				 alert("请求出错，请联系管理员！");
			 
		 },
		 contentType:parament.contentType,
		 complete:parament.complete,
		 timeout:parament.timeout
	 });
}

接下来是用JS构造分页标签的代码：

/*****************************  分页代码 **********************************/
var Pager={};
/**
 * 构建分页HTML
 */
Pager.putHtml = function(documentId,page,count,size){
	var html = '<input name="pageNum" type="hidden" value="'+page+'" /><span οnclick="Pager.jumpPage(\''+documentId+'\',1)" name="home">首页</span>'+
	'<span οnclick="Pager.prevPage(\''+documentId+'\')" name="prev">上一页</span>';
	var totalPage = Math.ceil(count/size);//总页数
	html+='<input name="count" type="hidden" value="'+count+'" /><input name="size" type="hidden" value="'+size+'" />';
	//构造前面的页数
	for(var i = 1;i<page;i++){
		if(page-1>0&&i==page-4){
			html+='<span οnclick="Pager.jumpPage(\''+documentId+'\','+(page-4)+')">...</span>';
		}
		if(i+4>page)
			html+='<span οnclick="Pager.jumpPage(\''+documentId+'\','+i+')">'+i+'</span>';
	}
	//当前页
	html+='<span class="active">'+page+'</span>';
	//后面的页数
	for(var i = page+1;i<=totalPage;i++){
		html+='<span οnclick="Pager.jumpPage(\''+documentId+'\','+i+')">'+i+'</span>';
		if(i<totalPage&&i==page+3){
			html+='<span οnclick="Pager.jumpPage(\''+documentId+'\','+(page+4)+')">...</span>';
			break;
		}
	}
	//下一页
	html+='<span οnclick="Pager.nextPage(\''+documentId+'\')">下一页</span><span οnclick="Pager.jumpPage(\''+documentId+'\','+totalPage+')">末页</span>'+
	'跳转 <input name="jumpInput" class="changeipt" type="text" value="1" /> 页 <button οnclick="Pager.jumpByInput(\''+documentId+'\')" class="changebtn">GO</button>';
	$("#"+documentId).html(html);
}

Pager.getValueByDocument = function(documentId){
	var parent = $("#"+documentId);
	var pageNum = parent.find("input[name='pageNum']").val()*1;//转换为int
	var count = parent.find("input[name='count']").val()*1;
	var size = parent.find("input[name='size']").val()*1;
	var totalPage = Math.ceil(count/size);//总页数
	var json = {"page":pageNum,"count":count,"size":size,"totalPage":totalPage};
	return json;
}
/**
 * 对外封装分页方法
 */
Pager.createPage = function(parament){
	if(!parament.data)
		parament.data={};
	parament.data.page = parament.page;
	parament.data.size = parament.size;
	//移除无效参数
	for(var o in parament.data){
		var v = parament.data[o];
		if(!v||v==""){
			delete parament.data[o];
		}
	}
	
	if(!Pager.data)
		Pager.data={};
	//保存请求的URL和参数
	Pager.data[parament.ducomentId]=parament;
	
	//发送Ajax请求
	Ajax({
		url:parament.url,
		data:parament.data,
		success:function(data){
			//Ajax请求返回Page对象
			var count = data.totalElements;  //var count = data.count; //总条数
			var size = data.size; //var size = data.size;	//每页条件
			//构造HTML
			Pager.putHtml(parament.ducomentId,parament.page,count,size);
			//调用回调函数
			parament.callback(data);
		}
	});
}
//下一页
Pager.nextPage = function(documentId){
	var pageValue = Pager.getValueByDocument(documentId);
	if(pageValue.page<pageValue.totalPage){
		var param = Pager.data[documentId];//重新获取保存的数据
		param.page = pageValue.page+1;
		Pager.createPage(param);
		//Pager.putHtml(documentId,pageValue.page+1,pageValue.count,pageValue.size);//构建新的分页HTML
	}
}
//上一页
Pager.prevPage = function(documentId){
	var pageValue = Pager.getValueByDocument(documentId);
	if(pageValue.page>0){
		var param = Pager.data[documentId];//重新获取保存的数据
		param.page = pageValue.page-1;
		Pager.createPage(param);
		//Pager.putHtml(documentId,pageValue.page-1,pageValue.count,pageValue.size);//构建新的分页HTML
	}
}
//跳转页
Pager.jumpPage = function(documentId,page){
	var pageValue = Pager.getValueByDocument(documentId);
	if(page>0&&page<=pageValue.totalPage){
		var param = Pager.data[documentId];//重新获取保存的数据
		param.page = page;
		Pager.createPage(param);
		//Pager.putHtml(documentId,page,pageValue.count,pageValue.size);//构建新的分页HTML
	}
}
/**
 * 跳转至输入的页数
 */
Pager.jumpByInput = function(documentId){
	var page = $("#"+documentId).find("input[name='jumpInput']").val()*1;
	Pager.jumpPage(documentId,page);
}

解释下上面的代码，

Pager.putHtml

构造分页标签的HTML 如: 上一页 1 2 3  下一页 这样的，样式在这里就不提供了。

其中当前页、每页条数，总打数等信息放在隐藏输入框里，参数documentId

documentId

就是你的分页HTML代码将要放在该元素中的ID，如<div id="a"></a> 那么分页代码将会放入此处。

上面的代码除了分页标签的样式之外可以直接拿去用，没必要再自己写了。

最后是使用姿势：

Pager.createPage({
				url:'/order/getList',
				page:1,
				size:10,
				data:{"param":"这里传参数"},
				ducomentId:"这里上面已经说了，就是你的分页标签要放的位置的ID",
				callback:function(data){
					var myTemplate = Handlebars.compile($("#table-template").html());
					//将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
			        	$('#tableBody').html(myTemplate(data));
			       		$('#totalCountDomId').html("共"+data.totalElements+"条数据");
				}
			});

在callback中构造你的HTML列表，这里我是使用的handlebars 。请根据自己使用的模板框架来写构造列表代码。

到这里就OK了，不管是分页查询还是带条件的分页查询都没问题，data传的就是你的查询条件，注意不要传""这样的空字符串哦、