转载 主题：写了个Jquery异步分页插件
梦回forever 2012-09-03
主题：写了个Jquery异步分页插件
publicclassPage{
/**
*当前页号
*/
privateintcurrPageNum=1;
/**
*总记录数
*/
privateinttotalRowSize=0;
/**
*每页记录数
*/
privateintpageRowSize=10;
publicintgetCurrPageNum(){
returncurrPageNum;
}
publicvoidsetCurrPageNum(intcurrPageNum){
this.currPageNum=currPageNum;
}
publicintgetTotalPageNum(){
inttotal=(totalRowSize%pageRowSize==0)?(totalRowSize/pageRowSize):(totalRowSize/pageRowSize+1);
returntotal;
}
publicintgetTotalRowSize(){
returntotalRowSize;
}
publicvoidsetTotalRowSize(inttotalRowSize){
this.totalRowSize=totalRowSize;
}
publicintgetPageRowSize(){
returnpageRowSize;
}
publicvoidsetPageRowSize(intpageRowSize){
this.pageRowSize=pageRowSize;
}
publicintgetFirstResult(){
if(getCurrPageNum()<=0)return0;
returngetPageRowSize()*(getCurrPageNum()-1);
}
publicintgetMaxResult(){
returnthis.getFirstResult()+this.getPageRowSize();
}
}
==================================================================
然后看list_user.jsp：
Java代码
1.<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>
2.<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3.<htmlxmlns="http://www.w3.org/1999/xhtml">
4.<head>
5.<title>异步分页</title>
6.<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
7.<linkhref="../css/local.css"rel="stylesheet"type="text/css"/>
8.<scripttype="text/javascript"src="../js/jquery-1.4.2.min.js"></script>
9.<scripttype="text/javascript"src="../js/asyn_page.js"></script>
10.<scripttype="text/javascript">
11.vartotalRowSize=${totalRowSize};
12.$(document).ready(function(){
13.$("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize);
14.});
15.
16.//构建内容
17.functionbuildHtml(users){
18.$.each(users,function(i,user){
19.vartr=[
20.'<tr>',
21.'<td>',user.userId,'</td>',
22.'<td>',user.username,'</td>',
23.'<td>',user.sex,'</td>',
24.'<td>',user.age,'</td>',
25.'<td>',user.email,'</td>',
26.'<td>',user.address,'</td>',
27.'<td>',user.registerTime,'</td>',
28.'<td></td>',
29.'</tr>'
30.].join('');
31.$("#tbody").append(tr);
32.});
33.}
34.</script>
35.</head>
36.<body>
37.<table>
38.<thead>
39.<tr>
40.<th>ID</th>
41.<th>用户名</th>
42.<th>性别</th>
43.<th>年龄</th>
44.<th>Email</th>
45.<th>地址</th>
46.<th>注册时间</th>
47.<th>操作</th>
48.</tr>
49.</thead>
50.<tbodyid="tbody"></tbody>
51.</table>
52.<divid="pageWidget"class="page"></div>
53.</body>
54.</html>
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>异步分页</title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<linkhref="../css/local.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript"src="../js/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"src="../js/asyn_page.js"></script>
<scripttype="text/javascript">
vartotalRowSize=${totalRowSize};
$(document).ready(function(){
$("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize);
});
//构建内容
functionbuildHtml(users){
$.each(users,function(i,user){
vartr=[
'<tr>',
'<td>',user.userId,'</td>',
'<td>',user.username,'</td>',
'<td>',user.sex,'</td>',
'<td>',user.age,'</td>',
'<td>',user.email,'</td>',
'<td>',user.address,'</td>',
'<td>',user.registerTime,'</td>',
'<td></td>',
'</tr>'
].join('');
$("#tbody").append(tr);
});
}
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>性别</th>
<th>年龄</th>
<th>Email</th>
<th>地址</th>
<th>注册时间</th>
<th>操作</th>
</tr>
</thead>
<tbodyid="tbody"></tbody>
</table>
<divid="pageWidget"class="page"></div>
</body>
</html>
可以看到id为tbody的元素是作为分页内容展示容器，id为pageWidget的元素作为分页控件展示容器。
然后提供了一个buildHtml()函数来具体构建分页内容的。
使用异步分页插件很简单，只要这么调用：
Js代码
1.$("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize);
$("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize);这是最简化调用。还可以传额外查询参数，以及定制每页显示记录数，具体使用方式见插件的具体介绍。
下面是asynPage插件内容：
Js代码
1./*
2.*===================AJAX异步分页=================
3.*
4.*Copyright2012823,zhutx
5.*
6.*假设id为pageWidget的div是你放置分页控件的容器，则按如下形式调用：
7.*$("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize,{"pageRowSize":10});
8.*参数说明：
9.*------------Required-----------
10.*参数一：请求URL
11.*参数二：渲染结果集的页面容器
12.*参数三：负责渲染结果集到页面的函数
13.*参数四：总记录数
14.*------------Optional-----------
15.*参数五(json对象)：
16.*属性pageRowSize:每页记录数(不配置，则默认为20)
17.*属性param:请求参数(json格式)
18.*/
19.(function($){
20.varsettings;
21.varpage;
22.varparamStr;
23.
24.$.fn.asynPage=function(url,contentContainer,buildHtml_fun,totalRowSize,callerSettings){
25.
26.settings=$.extend({
27.currPageNum:1,
28.pageRowSize:20,
29.param:null
30.},callerSettings||{});
31.
32.settings.contentContainer=$(contentContainer);
33.settings.url=url;
34.settings.pageWidget=this;
35.settings.totalRowSize=totalRowSize;
36.settings.buildHtml_fun=buildHtml_fun;
37.
38.page=newPage(settings.currPageNum,settings.totalRowSize,settings.pageRowSize);
39.
40.paramStr=makeParamStr(settings.param);
41.
42.//开始获取数据
43.fetchData(page.getCurrPageNum());
44.
45.returnthis;
46.};
47.
48./*将json转换为请求参数字符串*/
49.vartrunParamConfig2RequestParamStr=function(json){
50.varstr="";
51.for(keyinjson){
52.if(str==""){
53.str+=key+"="+json[key];
54.}else{
55.str+="&"+key+"="+json[key];
56.}
57.}
58.returnstr;
59.};
60.
61./*将配置参数拼接为请求字符串*/
62.varmakeParamStr=function(param_json){
63.if(param_json==null){
64.return"";
65.}else{
66.returntrunParamConfig2RequestParamStr(param_json);
67.}
68.};
69.
70./*
71.*负责获取后台数据，获取完毕后会触发构建分页控件
72.*/
73.varfetchData=function(currPageNum){
74.
75.page.setCurrPageNum(currPageNum);
76.varfirstResult=page.getFirstResult();
77.varmaxResult=page.getMaxResult();
78.varpageRowSize=page.getPageRowSize();
79.
80.vardata=null;
81.if(paramStr){
82.data=paramStr+"&page.currPageNum="+currPageNum+"&page.pageRowSize="+pageRowSize+"&page.firstResult="+firstResult+"&page.maxResult="+maxResult;
83.}else{
84.data="page.currPageNum="+currPageNum+"&page.pageRowSize="+pageRowSize+"&page.firstResult="+firstResult+"&page.maxResult="+maxResult;
85.}
86.
87.$.ajax({
88.type:"POST",
89.url:settings.url,
90.data:data,
91.success:function(datas){
92.settings.contentContainer.empty();
93.settings.buildHtml_fun(datas);
94.buildPageWidget(page);//触发构建分页控件
95.},
96.error:function(xmlHttpRequest,textStatus,errorThrown){
97.if(textStatus=="error"){
98.varerror=eval('('+xmlHttpRequest.responseText+')');
99.alert("Sorry："+error.errorCode+"，"+error.message+"！");
100.}
101.}
102.});
103.};
104.
105.vartrunTargetPage=function(pageNum){
106.fetchData(pageNum);
107.}
108.
109./*为分页控件绑定事件*/
110.varbindEvent=function(){
111.varlinks=settings.pageWidget.find("a");
112.$.each(links,function(i,link){
113.varlink=$(link);
114.varpageNum=link.attr("pageNum");
115.link.click(function(){
116.trunTargetPage(pageNum);
117.});
118.});
119.}
120.
121./*构建分页控件的具体算法实现*/
122.varbuildPageWidget=function(page){
123.
124.//构建分页控件前，先清理现有控件
125.settings.pageWidget.empty();
126.
127./*---------------下面开始进入真正的分页控件构建过程--------------*/
128.
129./*---------------1.开始：构建描述信息（如“共？页，？条记录”）-----------------*/
130.settings.pageWidget.append("<divclass='total'>共<span>"+page.getTotalPageNum()+"</span>页 <span>"+page.getTotalRowSize()+"</span>条记录</div>");
131.settings.pageWidget.append("<ul>");
132./*---------------1.结束：构建描述信息（如“共？页，？条记录”）-----------------*/
133.
134./*---------------2.开始：构建“首页”和“上一页”控件-------------*/
135.varcurrPageNum=Number(page.getCurrPageNum());
136.vartotalPageNum=Number(page.getTotalPageNum());
137.
138.if(currPageNum==1){
139.//如果你希望当前页是第一页的时候，也允许“首页”和“上一页”控件出现，则可以在这里进行补充
140.}else{
141.settings.pageWidget.find("ul").append("<li><aid=''pageNum='1'href='javascript:void(0);'title='首页'class='first'>首页</a></li>");
142.settings.pageWidget.find("ul").append("<li><aid=''pageNum='"+(currPageNum-1)+"'href='javascript:void(0);'title='上一页'class='prev'>上一页</a></li>");
143.}
144./*---------------2.结束：构建“首页”和“上一页”控件-------------*/
145.
146./*---------------3.开始：构建分页数字控件--------------*/
147.if(totalPageNum<10){
148.for(vari=1;i<=totalPageNum;i++){
149.if(i==currPageNum){
150.settings.pageWidget.find("ul").append("<li><aid=''pageNum='"+i+"'href='javascript:void(0);'title=''class='current'>"+i+"</a></li>");
151.}else{
152.settings.pageWidget.find("ul").append("<li><aid=''pageNum='"+i+"'href='javascript:void(0);'title=''class='javascript:trunTargetPage("+i+");'>"+i+"</a></li>");
153.}
154.}
155.//如果总页数>=10
156.}else{
157.//如果当前页小于5，则显示1-9项，且记忆当前项
158.if(currPageNum<5){
159.for(vari=1;i<10;i++){
160.if(i==currPageNum){
161.settings.pageWidget.find("ul").append("<li><aid=''pageNum='"+i+"'href='javascript:void(0);'title=''class='current'>"+i+"</a></li>");
162.}else{
163.settings.pageWidget.find("ul").append("<li><aid=''pageNum='"+i+"'href='javascript:void(0);'title=''class=''>"+i+"</a></li>");
164.}
165.}
166.//如果当前页>=5，且总页数与当前页的差<4
167.}elseif(totalPageNum-currPageNum<4){
168.for(vari=totalPageNum-8;i<=totalPageNum;i++){
169.if(i==currPageNum){
170.settings.pageWidget.find("ul").append("<li><aid=''pageNum='"+i+"'href='javascript:void(0);'title=''class='current'>"+i+"</a></li>");
171.}else{
172.settings.pageWidget.find("ul").append("<li><aid=''pageNum='"+i+"'href='javascript:void(0);'title=''class=''>"+i+"</a></li>");
173.}
174.}
175.//如果当前页>=5，则显示围绕当前页的9项，且记忆当前项
176.}else{
177.for(vari=currPageNum-4;i<currPageNum+5;i++){
178.if(i==currPageNum){
179.settings.pageWidget.find("ul").append("<li><aid=''pageNum='"+i+"'href='javascript:void(0);'title=''class='current'>"+i+"</a></li>");
180.}else{
181.settings.pageWidget.find("ul").append("<li><aid=''pageNum='"+i+"'href='javascript:void("+i+");'title=''class=''>"+i+"</a></li>");
182.}
183.}
184.}
185.}
186./*---------------3.结束：构建分页数字控件--------------*/
187.
188./*---------------4.开始：构建“下一页”和“尾页”控件-------------*/
189.if(totalPageNum==currPageNum){
190.//如果你希望当前页是最后一页的时候，也允许“尾页”和“下一页”控件出现，则可以在这里进行补充
191.}else{
192.settings.pageWidget.find("ul").append("<li><aid=''pageNum='"+(currPageNum+1)+"'href='javascript:void(0);'title='下一页'class='next'>下一页</a></li>");
193.settings.pageWidget.find("ul").append("<li><aid=''pageNum='"+totalPageNum+"'href='javascript:void(0);'title='尾页'class='last'>尾页</a></li>");
194.}
195./*---------------4.结束：构建“下一页”和“尾页”控件-------------*/
196.
197.//还要为控件绑定点击事件
198.bindEvent();
199.}
200.
201.})(jQuery);
202.
203./*
204.*Page类
205.*/
206.functionPage(currPageNum,totalRowSize,pageRowSize){
207.this.currPageNum=currPageNum;
208.this.totalRowSize=totalRowSize;
209.this.pageRowSize=pageRowSize;
210.}
211.Page.prototype.getCurrPageNum=function(){
212.returnthis.currPageNum;
213.};
214.Page.prototype.setCurrPageNum=function(currPageNum){
215.this.currPageNum=currPageNum;
216.};
217.Page.prototype.getTotalPageNum=function(){
218.return(this.totalRowSize%this.pageRowSize==0)?(this.totalRowSize/this.pageRowSize):(Math.floor(this.totalRowSize/this.pageRowSize)+1);
219.};
220.Page.prototype.getTotalRowSize=function(){
221.returnthis.totalRowSize;
222.};
223.Page.prototype.setTotalRowSize=function(totalRowSize){
224.this.totalRowSize=totalRowSize;
225.};
226.Page.prototype.getPageRowSize=function(){
227.returnthis.pageRowSize;
228.};
229.Page.prototype.setPageRowSize=function(pageRowSize){
230.this.pageRowSize=pageRowSize;
231.};
232.Page.prototype.getFirstResult=function(){
233.if(this.getCurrPageNum()<=0)return0;
234.returnthis.getPageRowSize()*(this.getCurrPageNum()-1);
235.};
236.Page.prototype.getMaxResult=function(){
237.returnthis.getFirstResult()+this.getPageRowSize();
238.};
/*
*===================AJAX异步分页=================
*
*Copyright2012823,zhutx
*
*假设id为pageWidget的div是你放置分页控件的容器，则按如下形式调用：
*$("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize,{"pageRowSize":10});
*参数说明：
*------------Required-----------
*参数一：请求URL
*参数二：渲染结果集的页面容器
*参数三：负责渲染结果集到页面的函数
*参数四：总记录数
*------------Optional-----------
*参数五(json对象)：
*属性pageRowSize:每页记录数(不配置，则默认为20)
*属性param:请求参数(json格式)
*/
(function($){
varsettings;
varpage;
varparamStr;
$.fn.asynPage=function(url,contentContainer,buildHtml_fun,totalRowSize,callerSettings){
settings=$.extend({
currPageNum:1,
pageRowSize:20,
param:null
},callerSettings||{});
settings.contentContainer=$(contentContainer);
settings.url=url;
settings.pageWidget=this;
settings.totalRowSize=totalRowSize;
settings.buildHtml_fun=buildHtml_fun;
page=newPage(settings.currPageNum,settings.totalRowSize,settings.pageRowSize);
paramStr=makeParamStr(settings.param);
//开始获取数据
fetchData(page.getCurrPageNum());
returnthis;
};
/*将json转换为请求参数字符串*/
vartrunParamConfig2RequestParamStr=function(json){
varstr="";
for(keyinjson){
if(str==""){
str+=key+"="+json[key];
}else{
str+="&"+key+"="+json[key];
}
}
returnstr;
};
/*将配置参数拼接为请求字符串*/
varmakeParamStr=function(param_json){
if(param_json==null){
return"";
}else{
returntrunParamConfig2RequestParamStr(param_json);
}
};
/*
*负责获取后台数据，获取完毕后会触发构建分页控件
*/
varfetchData=function(currPageNum){
page.setCurrPageNum(currPageNum);
varfirstResult=page.getFirstResult();
varmaxResult=page.getMaxResult();
varpageRowSize=page.getPageRowSize();
vardata=null;
if(paramStr){
data=paramStr+"&page.currPageNum="+currPageNum+"&page.pageRowSize="+pageRowSize+"&page.firstResult="+firstResult+"&page.maxResult="+maxResult;
}else{
data="page.currPageNum="+currPageNum+"&page.pageRowSize="+pageRowSize+"&page.firstResult="+firstResult+"&page.maxResult="+maxResult;
}
$.ajax({
type:"POST",
url:settings.url,
data:data,
success:function(datas){
settings.contentContainer.empty();
settings.buildHtml_fun(datas);
buildPageWidget(page);//触发构建分页控件
},
error:function(xmlHttpRequest,textStatus,errorThrown){
if(textStatus=="error"){
varerror=eval('('+xmlHttpRequest.responseText+')');
alert("Sorry："+error.errorCode+"，"+error.message+"！");
}
}
});
};
vartrunTargetPage=function(pageNum){
fetchData(pageNum);
}
/*为分页控件绑定事件*/
varbindEvent=function(){
varlinks=settings.pageWidget.find("a");
$.each(links,function(i,link){
varlink=$(link);
varpageNum=link.attr("pageNum");
link.click(function(){
trunTargetPage(pageNum);
});
});
}
/*构建分页控件的具体算法实现*/
varbuildPageWidget=function(page){
//构建分页控件前，先清理现有控件
settings.pageWidget.empty();
/*---------------下面开始进入真正的分页控件构建过程--------------*/
/*---------------1.开始：构建描述信息（如“共？页，？条记录”）-----------------*/
settings.pageWidget.append("<divclass='total'>共<span>"+page.getTotalPageNum()+"</span>页 <span>"+page.getTotalRowSize()+"</span>条记录</div>");
settings.pageWidget.append("<ul>");
/*---------------1.结束：构建描述信息（如“共？页，？条记录”）-----------------*/
/*---------------2.开始：构建“首页”和“上一页”控件-------------*/
varcurrPageNum=Number(page.getCurrPageNum());
vartotalPageNum=Number(page.getTotalPageNum());
if(currPageNum==1){
//如果你希望当前页是第一页的时候，也允许“首页”和“上一页”控件出现，则可以在这里进行补充
}else{
settings.pageWidget.find("ul").append("<li><aid=''pageNum='1'href='javascript:void(0);'title='首页'class='first'>首页</a></li>");
settings.pageWidget.find("ul").append("<li><aid=''pageNum='"+(currPageNum-1)+"'href='javascript:void(0);'title='上一页'class='prev'>上一页</a></li>");
}
/*---------------2.结束：构建“首页”和“上一页”控件-------------*/
/*---------------3.开始：构建分页数字控件--------------*/
if(totalPageNum<10){
for(vari=1;i<=totalPageNum;i++){
if(i==currPageNum){
settings.pageWidget.find("ul").append("<li><aid=''pageNum='"+i+"'href='javascript:void(0);'title=''class='current'>"+i+"</a></li>");
}else{
settings.pageWidget.find("ul").append("<li><aid=''pageNum='"+i+"'href='javascript:void(0);'title=''class='javascript:trunTargetPage("+i+");'>"+i+"</a></li>");
}
}
//如果总页数>=10
}else{
//如果当前页小于5，则显示1-9项，且记忆当前项
if(currPageNum<5){
for(vari=1;i<10;i++){
if(i==currPageNum){
settings.pageWidget.find("ul").append("<li><aid=''pageNum='"+i+"'href='javascript:void(0);'title=''class='current'>"+i+"</a></li>");
}else{
settings.pageWidget.find("ul").append("<li><aid=''pageNum='"+i+"'href='javascript:void(0);'title=''class=''>"+i+"</a></li>");
}
}
//如果当前页>=5，且总页数与当前页的差<4
}elseif(totalPageNum-currPageNum<4){
for(vari=totalPageNum-8;i<=totalPageNum;i++){
if(i==currPageNum){
settings.pageWidget.find("ul").append("<li><aid=''pageNum='"+i+"'href='javascript:void(0);'title=''class='current'>"+i+"</a></li>");
}else{
settings.pageWidget.find("ul").append("<li><aid=''pageNum='"+i+"'href='javascript:void(0);'title=''class=''>"+i+"</a></li>");
}
}
//如果当前页>=5，则显示围绕当前页的9项，且记忆当前项
}else{
for(vari=currPageNum-4;i<currPageNum+5;i++){
if(i==currPageNum){
settings.pageWidget.find("ul").append("<li><aid=''pageNum='"+i+"'href='javascript:void(0);'title=''class='current'>"+i+"</a></li>");
}else{
settings.pageWidget.find("ul").append("<li><aid=''pageNum='"+i+"'href='javascript:void("+i+");'title=''class=''>"+i+"</a></li>");
}
}
}
}
/*---------------3.结束：构建分页数字控件--------------*/
/*---------------4.开始：构建“下一页”和“尾页”控件-------------*/
if(totalPageNum==currPageNum){
//如果你希望当前页是最后一页的时候，也允许“尾页”和“下一页”控件出现，则可以在这里进行补充
}else{
settings.pageWidget.find("ul").append("<li><aid=''pageNum='"+(currPageNum+1)+"'href='javascript:void(0);'title='下一页'class='next'>下一页</a></li>");
settings.pageWidget.find("ul").append("<li><aid=''pageNum='"+totalPageNum+"'href='javascript:void(0);'title='尾页'class='last'>尾页</a></li>");
}
/*---------------4.结束：构建“下一页”和“尾页”控件-------------*/
//还要为控件绑定点击事件
bindEvent();
}
})(jQuery);
/*
*Page类
*/
functionPage(currPageNum,totalRowSize,pageRowSize){
this.currPageNum=currPageNum;
this.totalRowSize=totalRowSize;
this.pageRowSize=pageRowSize;
}
Page.prototype.getCurrPageNum=function(){
returnthis.currPageNum;
};
Page.prototype.setCurrPageNum=function(currPageNum){
this.currPageNum=currPageNum;
};
Page.prototype.getTotalPageNum=function(){
return(this.totalRowSize%this.pageRowSize==0)?(this.totalRowSize/this.pageRowSize):(Math.floor(this.totalRowSize/this.pageRowSize)+1);
};
Page.prototype.getTotalRowSize=function(){
returnthis.totalRowSize;
};
Page.prototype.setTotalRowSize=function(totalRowSize){
this.totalRowSize=totalRowSize;
};
Page.prototype.getPageRowSize=function(){
returnthis.pageRowSize;
};
Page.prototype.setPageRowSize=function(pageRowSize){
this.pageRowSize=pageRowSize;
};
Page.prototype.getFirstResult=function(){
if(this.getCurrPageNum()<=0)return0;
returnthis.getPageRowSize()*(this.getCurrPageNum()-1);
};
Page.prototype.getMaxResult=function(){
returnthis.getFirstResult()+this.getPageRowSize();
};
