使用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 onclick="Pager.jumpPage(\''+documentId+'\',1)" name="home">首页</span>'+
'<span onclick="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 onclick="Pager.jumpPage(\''+documentId+'\','+(page-4)+')">...</span>';
}
if(i+4>page)
html+='<span onclick="Pager.jumpPage(\''+documentId+'\','+i+')">'+i+'</span>';
}
//当前页
html+='<span class="active">'+page+'</span>';
//后面的页数
for(var i = page+1;i<=totalPage;i++){
html+='<span onclick="Pager.jumpPage(\''+documentId+'\','+i+')">'+i+'</span>';
if(i<totalPage&&i==page+3){
html+='<span onclick="Pager.jumpPage(\''+documentId+'\','+(page+4)+')">...</span>';
break;
}
}
//下一页
html+='<span onclick="Pager.nextPage(\''+documentId+'\')">下一页</span><span onclick="Pager.jumpPage(\''+documentId+'\','+totalPage+')">末页</span>'+
'跳转 <input name="jumpInput" class="changeipt" type="text" value="1" /> 页 <button onclick="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传的就是你的查询条件，注意不要传""这样的空字符串哦、

更多相关文章

随机推荐