xinyoulinglei
- 浏览: 124140 次
-
最新评论
-
gaoxikun：
看起来很齐全，很完美，但是不知道从哪里下载 。
myeclipse插件简单介绍 -
gaoxikun：
亲，能把这个集成了插件的myeclipse 6.5给我一下吗， ...
myeclipse插件简单介绍 -
hotsmile：
不错！！！！！！！！！
myeclipse插件简单介绍
主题：写了个Jquery异步分页插件
http://www.iteye.com/topic/1126433 作者：zhutianxiang
public class Page {
/**
* 当前页号
*/
private int currPageNum = 1;
/**
* 总记录数
*/
private int totalRowSize = 0;
/**
* 每页记录数
*/
private int pageRowSize = 10;
public int getCurrPageNum() {
return currPageNum;
}
public void setCurrPageNum(int currPageNum) {
this.currPageNum = currPageNum;
}
public int getTotalPageNum() {
int total = (totalRowSize%pageRowSize==0)?(totalRowSize/pageRowSize):(totalRowSize/pageRowSize+1);
return total;
}
public int getTotalRowSize() {
return totalRowSize;
}
public void setTotalRowSize(int totalRowSize) {
this.totalRowSize = totalRowSize;
}
public int getPageRowSize() {
return pageRowSize;
}
public void setPageRowSize(int pageRowSize) {
this.pageRowSize = pageRowSize;
}
public int getFirstResult(){
if(getCurrPageNum()<=0) return 0;
return getPageRowSize() * (getCurrPageNum() - 1);
}
public int getMaxResult() {
return this.getFirstResult()+this.getPageRowSize();
}
}
==================================================================
然后看list_user.jsp：
Java代码
1.<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
2.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3.<html xmlns="http://www.w3.org/1999/xhtml">
4. <head>
5. <title>异步分页</title>
6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
7. <link href="../css/local.css" rel="stylesheet" type="text/css" />
8. <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
9. <script type="text/javascript" src="../js/asyn_page.js"></script>
10. <script type="text/javascript">
11. var totalRowSize = ${totalRowSize};
12. $(document).ready(function(){
13. $("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize);
14. });
15.
16. //构建内容
17. function buildHtml(users){
18. $.each(users,function(i,user){
19. var tr = [
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. <tbody id="tbody"></tbody>
51. </table>
52. <div id="pageWidget" class="page"></div>
53. </body>
54.</html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>异步分页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="../css/local.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/asyn_page.js"></script>
<script type="text/javascript">
var totalRowSize = ${totalRowSize};
$(document).ready(function(){
$("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize);
});
//构建内容
function buildHtml(users){
$.each(users,function(i,user){
var tr = [
'<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>
<tbody id="tbody"></tbody>
</table>
<div id="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. * Copyright 2012 8 23, 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. var settings;
21. var page;
22. var paramStr;
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 = new Page(settings.currPageNum,settings.totalRowSize,settings.pageRowSize);
39.
40. paramStr = makeParamStr(settings.param);
41.
42. //开始获取数据
43. fetchData(page.getCurrPageNum());
44.
45. return this;
46. };
47.
48. /* 将json转换为请求参数字符串 */
49. var trunParamConfig2RequestParamStr = function(json){
50. var str = "";
51. for(key in json){
52. if(str==""){
53. str += key+"="+json[key];
54. }else{
55. str += "&"+key+"="+json[key];
56. }
57. }
58. return str;
59. };
60.
61. /* 将配置参数拼接为请求字符串 */
62. var makeParamStr = function(param_json){
63. if(param_json==null){
64. return "";
65. }else{
66. return trunParamConfig2RequestParamStr(param_json);
67. }
68. };
69.
70. /*
71. * 负责获取后台数据，获取完毕后会触发构建分页控件
72. */
73. var fetchData = function(currPageNum){
74.
75. page.setCurrPageNum(currPageNum);
76. var firstResult = page.getFirstResult();
77. var maxResult = page.getMaxResult();
78. var pageRowSize = page.getPageRowSize();
79.
80. var data = 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. var error = eval('('+xmlHttpRequest.responseText+')');
99. alert("Sorry："+error.errorCode+"，"+error.message+"！");
100. }
101. }
102. });
103. };
104.
105. var trunTargetPage = function(pageNum){
106. fetchData(pageNum);
107. }
108.
109. /* 为分页控件绑定事件 */
110. var bindEvent = function(){
111. var links = settings.pageWidget.find("a");
112. $.each(links,function(i,link){
113. var link = $(link);
114. var pageNum = link.attr("pageNum");
115. link.click(function(){
116. trunTargetPage(pageNum);
117. });
118. });
119. }
120.
121. /* 构建分页控件的具体算法实现 */
122. var buildPageWidget = function(page){
123.
124. //构建分页控件前，先清理现有控件
125. settings.pageWidget.empty();
126.
127. /* --------------- 下面开始进入真正的分页控件构建过程 -------------- */
128.
129. /* --------------- 1.开始：构建描述信息（如“共？页，？条记录”） ----------------- */
130. settings.pageWidget.append("<div class='total'>共<span>"+page.getTotalPageNum()+"</span>页 <span>"+page.getTotalRowSize()+"</span>条记录</div>");
131. settings.pageWidget.append("<ul>");
132. /* --------------- 1.结束：构建描述信息（如“共？页，？条记录”） ----------------- */
133.
134. /* --------------- 2.开始：构建“首页”和“上一页”控件 ------------- */
135. var currPageNum = Number(page.getCurrPageNum());
136. var totalPageNum = Number(page.getTotalPageNum());
137.
138. if(currPageNum==1){
139. //如果你希望当前页是第一页的时候，也允许“首页”和“上一页”控件出现，则可以在这里进行补充
140. }else{
141. settings.pageWidget.find("ul").append("<li><a id='' pageNum='1' href='javascript:void(0);' title='首页' class='first'>首页</a></li>");
142. settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+(currPageNum-1)+"' href='javascript:void(0);' title='上一页' class='prev'>上一页</a></li>");
143. }
144. /* --------------- 2.结束：构建“首页”和“上一页”控件 ------------- */
145.
146. /* --------------- 3.开始：构建分页数字控件 -------------- */
147. if(totalPageNum<10){
148. for(var i=1;i<=totalPageNum;i++){
149. if(i==currPageNum){
150. settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
151. }else{
152. settings.pageWidget.find("ul").append("<li><a id='' 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(var i =1;i<10;i++){
160. if(i==currPageNum){
161. settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
162. }else{
163. settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class=''>"+i+"</a></li>");
164. }
165. }
166. //如果当前页>=5，且总页数与当前页的差<4
167. }else if(totalPageNum-currPageNum<4){
168. for(var i=totalPageNum-8;i<=totalPageNum;i++){
169. if(i==currPageNum){
170. settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
171. }else{
172. settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class=''>"+i+"</a></li>");
173. }
174. }
175. //如果当前页>=5，则显示围绕当前页的9项，且记忆当前项
176. }else{
177. for(var i=currPageNum-4;i<currPageNum+5;i++){
178. if(i==currPageNum){
179. settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
180. }else{
181. settings.pageWidget.find("ul").append("<li><a id='' 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><a id='' pageNum='"+(currPageNum+1)+"' href='javascript:void(0);' title='下一页' class='next'>下一页</a></li>");
193. settings.pageWidget.find("ul").append("<li><a id='' 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.function Page(currPageNum,totalRowSize,pageRowSize){
207. this.currPageNum = currPageNum;
208. this.totalRowSize = totalRowSize;
209. this.pageRowSize = pageRowSize;
210.}
211.Page.prototype.getCurrPageNum = function(){
212. return this.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. return this.totalRowSize;
222.};
223.Page.prototype.setTotalRowSize = function(totalRowSize){
224. this.totalRowSize = totalRowSize;
225.};
226.Page.prototype.getPageRowSize = function(){
227. return this.pageRowSize;
228.};
229.Page.prototype.setPageRowSize = function(pageRowSize){
230. this.pageRowSize = pageRowSize;
231.};
232.Page.prototype.getFirstResult = function(){
233. if(this.getCurrPageNum()<=0) return 0;
234. return this.getPageRowSize() * (this.getCurrPageNum() - 1);
235.};
236.Page.prototype.getMaxResult = function(){
237. return this.getFirstResult() + this.getPageRowSize();
238.};
/*
* ===================AJAX异步分页=================
*
* Copyright 2012 8 23, zhutx
*
* 假设id为pageWidget的div是你放置分页控件的容器，则按如下形式调用：
* $("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize,{"pageRowSize":10});
* 参数说明：
* ------------Required-----------
* 参数一：请求URL
* 参数二：渲染结果集的页面容器
* 参数三：负责渲染结果集到页面的函数
* 参数四：总记录数
* ------------Optional-----------
* 参数五(json对象)：
* 属性pageRowSize:每页记录数(不配置，则默认为20)
* 属性param:请求参数(json格式)
*/
(function($){
var settings;
var page;
var paramStr;
$.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 = new Page(settings.currPageNum,settings.totalRowSize,settings.pageRowSize);
paramStr = makeParamStr(settings.param);
//开始获取数据
fetchData(page.getCurrPageNum());
return this;
};
/* 将json转换为请求参数字符串 */
var trunParamConfig2RequestParamStr = function(json){
var str = "";
for(key in json){
if(str==""){
str += key+"="+json[key];
}else{
str += "&"+key+"="+json[key];
}
}
return str;
};
/* 将配置参数拼接为请求字符串 */
var makeParamStr = function(param_json){
if(param_json==null){
return "";
}else{
return trunParamConfig2RequestParamStr(param_json);
}
};
/*
* 负责获取后台数据，获取完毕后会触发构建分页控件
*/
var fetchData = function(currPageNum){
page.setCurrPageNum(currPageNum);
var firstResult = page.getFirstResult();
var maxResult = page.getMaxResult();
var pageRowSize = page.getPageRowSize();
var data = 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"){
var error = eval('('+xmlHttpRequest.responseText+')');
alert("Sorry："+error.errorCode+"，"+error.message+"！");
}
}
});
};
var trunTargetPage = function(pageNum){
fetchData(pageNum);
}
/* 为分页控件绑定事件 */
var bindEvent = function(){
var links = settings.pageWidget.find("a");
$.each(links,function(i,link){
var link = $(link);
var pageNum = link.attr("pageNum");
link.click(function(){
trunTargetPage(pageNum);
});
});
}
/* 构建分页控件的具体算法实现 */
var buildPageWidget = function(page){
//构建分页控件前，先清理现有控件
settings.pageWidget.empty();
/* --------------- 下面开始进入真正的分页控件构建过程 -------------- */
/* --------------- 1.开始：构建描述信息（如“共？页，？条记录”） ----------------- */
settings.pageWidget.append("<div class='total'>共<span>"+page.getTotalPageNum()+"</span>页 <span>"+page.getTotalRowSize()+"</span>条记录</div>");
settings.pageWidget.append("<ul>");
/* --------------- 1.结束：构建描述信息（如“共？页，？条记录”） ----------------- */
/* --------------- 2.开始：构建“首页”和“上一页”控件 ------------- */
var currPageNum = Number(page.getCurrPageNum());
var totalPageNum = Number(page.getTotalPageNum());
if(currPageNum==1){
//如果你希望当前页是第一页的时候，也允许“首页”和“上一页”控件出现，则可以在这里进行补充
}else{
settings.pageWidget.find("ul").append("<li><a id='' pageNum='1' href='javascript:void(0);' title='首页' class='first'>首页</a></li>");
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+(currPageNum-1)+"' href='javascript:void(0);' title='上一页' class='prev'>上一页</a></li>");
}
/* --------------- 2.结束：构建“首页”和“上一页”控件 ------------- */
/* --------------- 3.开始：构建分页数字控件 -------------- */
if(totalPageNum<10){
for(var i=1;i<=totalPageNum;i++){
if(i==currPageNum){
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
}else{
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='javascript:trunTargetPage("+i+");'>"+i+"</a></li>");
}
}
//如果总页数>=10
}else{
//如果当前页小于5，则显示1-9项，且记忆当前项
if(currPageNum<5){
for(var i =1;i<10;i++){
if(i==currPageNum){
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
}else{
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class=''>"+i+"</a></li>");
}
}
//如果当前页>=5，且总页数与当前页的差<4
}else if(totalPageNum-currPageNum<4){
for(var i=totalPageNum-8;i<=totalPageNum;i++){
if(i==currPageNum){
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
}else{
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class=''>"+i+"</a></li>");
}
}
//如果当前页>=5，则显示围绕当前页的9项，且记忆当前项
}else{
for(var i=currPageNum-4;i<currPageNum+5;i++){
if(i==currPageNum){
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
}else{
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void("+i+");' title='' class=''>"+i+"</a></li>");
}
}
}
}
/* --------------- 3.结束：构建分页数字控件 -------------- */
/* --------------- 4.开始：构建“下一页”和“尾页”控件 ------------- */
if(totalPageNum==currPageNum){
//如果你希望当前页是最后一页的时候，也允许“尾页”和“下一页”控件出现，则可以在这里进行补充
}else{
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+(currPageNum+1)+"' href='javascript:void(0);' title='下一页' class='next'>下一页</a></li>");
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+totalPageNum+"' href='javascript:void(0);' title='尾页' class='last'>尾页</a></li>");
}
/* --------------- 4.结束：构建“下一页”和“尾页”控件 ------------- */
//还要为控件绑定点击事件
bindEvent();
}
})(jQuery);
/*
* Page类
*/
function Page(currPageNum,totalRowSize,pageRowSize){
this.currPageNum = currPageNum;
this.totalRowSize = totalRowSize;
this.pageRowSize = pageRowSize;
}
Page.prototype.getCurrPageNum = function(){
return this.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(){
return this.totalRowSize;
};
Page.prototype.setTotalRowSize = function(totalRowSize){
this.totalRowSize = totalRowSize;
};
Page.prototype.getPageRowSize = function(){
return this.pageRowSize;
};
Page.prototype.setPageRowSize = function(pageRowSize){
this.pageRowSize = pageRowSize;
};
Page.prototype.getFirstResult = function(){
if(this.getCurrPageNum()<=0) return 0;
return this.getPageRowSize() * (this.getCurrPageNum() - 1);
};
Page.prototype.getMaxResult = function(){
return this.getFirstResult() + this.getPageRowSize();
};
http://www.iteye.com/topic/1126433 作者：zhutianxiang
public class Page {
/**
* 当前页号
*/
private int currPageNum = 1;
/**
* 总记录数
*/
private int totalRowSize = 0;
/**
* 每页记录数
*/
private int pageRowSize = 10;
public int getCurrPageNum() {
return currPageNum;
}
public void setCurrPageNum(int currPageNum) {
this.currPageNum = currPageNum;
}
public int getTotalPageNum() {
int total = (totalRowSize%pageRowSize==0)?(totalRowSize/pageRowSize):(totalRowSize/pageRowSize+1);
return total;
}
public int getTotalRowSize() {
return totalRowSize;
}
public void setTotalRowSize(int totalRowSize) {
this.totalRowSize = totalRowSize;
}
public int getPageRowSize() {
return pageRowSize;
}
public void setPageRowSize(int pageRowSize) {
this.pageRowSize = pageRowSize;
}
public int getFirstResult(){
if(getCurrPageNum()<=0) return 0;
return getPageRowSize() * (getCurrPageNum() - 1);
}
public int getMaxResult() {
return this.getFirstResult()+this.getPageRowSize();
}
}
==================================================================
然后看list_user.jsp：
Java代码
1.<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
2.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3.<html xmlns="http://www.w3.org/1999/xhtml">
4. <head>
5. <title>异步分页</title>
6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
7. <link href="../css/local.css" rel="stylesheet" type="text/css" />
8. <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
9. <script type="text/javascript" src="../js/asyn_page.js"></script>
10. <script type="text/javascript">
11. var totalRowSize = ${totalRowSize};
12. $(document).ready(function(){
13. $("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize);
14. });
15.
16. //构建内容
17. function buildHtml(users){
18. $.each(users,function(i,user){
19. var tr = [
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. <tbody id="tbody"></tbody>
51. </table>
52. <div id="pageWidget" class="page"></div>
53. </body>
54.</html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>异步分页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="../css/local.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/asyn_page.js"></script>
<script type="text/javascript">
var totalRowSize = ${totalRowSize};
$(document).ready(function(){
$("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize);
});
//构建内容
function buildHtml(users){
$.each(users,function(i,user){
var tr = [
'<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>
<tbody id="tbody"></tbody>
</table>
<div id="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. * Copyright 2012 8 23, 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. var settings;
21. var page;
22. var paramStr;
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 = new Page(settings.currPageNum,settings.totalRowSize,settings.pageRowSize);
39.
40. paramStr = makeParamStr(settings.param);
41.
42. //开始获取数据
43. fetchData(page.getCurrPageNum());
44.
45. return this;
46. };
47.
48. /* 将json转换为请求参数字符串 */
49. var trunParamConfig2RequestParamStr = function(json){
50. var str = "";
51. for(key in json){
52. if(str==""){
53. str += key+"="+json[key];
54. }else{
55. str += "&"+key+"="+json[key];
56. }
57. }
58. return str;
59. };
60.
61. /* 将配置参数拼接为请求字符串 */
62. var makeParamStr = function(param_json){
63. if(param_json==null){
64. return "";
65. }else{
66. return trunParamConfig2RequestParamStr(param_json);
67. }
68. };
69.
70. /*
71. * 负责获取后台数据，获取完毕后会触发构建分页控件
72. */
73. var fetchData = function(currPageNum){
74.
75. page.setCurrPageNum(currPageNum);
76. var firstResult = page.getFirstResult();
77. var maxResult = page.getMaxResult();
78. var pageRowSize = page.getPageRowSize();
79.
80. var data = 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. var error = eval('('+xmlHttpRequest.responseText+')');
99. alert("Sorry："+error.errorCode+"，"+error.message+"！");
100. }
101. }
102. });
103. };
104.
105. var trunTargetPage = function(pageNum){
106. fetchData(pageNum);
107. }
108.
109. /* 为分页控件绑定事件 */
110. var bindEvent = function(){
111. var links = settings.pageWidget.find("a");
112. $.each(links,function(i,link){
113. var link = $(link);
114. var pageNum = link.attr("pageNum");
115. link.click(function(){
116. trunTargetPage(pageNum);
117. });
118. });
119. }
120.
121. /* 构建分页控件的具体算法实现 */
122. var buildPageWidget = function(page){
123.
124. //构建分页控件前，先清理现有控件
125. settings.pageWidget.empty();
126.
127. /* --------------- 下面开始进入真正的分页控件构建过程 -------------- */
128.
129. /* --------------- 1.开始：构建描述信息（如“共？页，？条记录”） ----------------- */
130. settings.pageWidget.append("<div class='total'>共<span>"+page.getTotalPageNum()+"</span>页 <span>"+page.getTotalRowSize()+"</span>条记录</div>");
131. settings.pageWidget.append("<ul>");
132. /* --------------- 1.结束：构建描述信息（如“共？页，？条记录”） ----------------- */
133.
134. /* --------------- 2.开始：构建“首页”和“上一页”控件 ------------- */
135. var currPageNum = Number(page.getCurrPageNum());
136. var totalPageNum = Number(page.getTotalPageNum());
137.
138. if(currPageNum==1){
139. //如果你希望当前页是第一页的时候，也允许“首页”和“上一页”控件出现，则可以在这里进行补充
140. }else{
141. settings.pageWidget.find("ul").append("<li><a id='' pageNum='1' href='javascript:void(0);' title='首页' class='first'>首页</a></li>");
142. settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+(currPageNum-1)+"' href='javascript:void(0);' title='上一页' class='prev'>上一页</a></li>");
143. }
144. /* --------------- 2.结束：构建“首页”和“上一页”控件 ------------- */
145.
146. /* --------------- 3.开始：构建分页数字控件 -------------- */
147. if(totalPageNum<10){
148. for(var i=1;i<=totalPageNum;i++){
149. if(i==currPageNum){
150. settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
151. }else{
152. settings.pageWidget.find("ul").append("<li><a id='' 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(var i =1;i<10;i++){
160. if(i==currPageNum){
161. settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
162. }else{
163. settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class=''>"+i+"</a></li>");
164. }
165. }
166. //如果当前页>=5，且总页数与当前页的差<4
167. }else if(totalPageNum-currPageNum<4){
168. for(var i=totalPageNum-8;i<=totalPageNum;i++){
169. if(i==currPageNum){
170. settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
171. }else{
172. settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class=''>"+i+"</a></li>");
173. }
174. }
175. //如果当前页>=5，则显示围绕当前页的9项，且记忆当前项
176. }else{
177. for(var i=currPageNum-4;i<currPageNum+5;i++){
178. if(i==currPageNum){
179. settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
180. }else{
181. settings.pageWidget.find("ul").append("<li><a id='' 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><a id='' pageNum='"+(currPageNum+1)+"' href='javascript:void(0);' title='下一页' class='next'>下一页</a></li>");
193. settings.pageWidget.find("ul").append("<li><a id='' 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.function Page(currPageNum,totalRowSize,pageRowSize){
207. this.currPageNum = currPageNum;
208. this.totalRowSize = totalRowSize;
209. this.pageRowSize = pageRowSize;
210.}
211.Page.prototype.getCurrPageNum = function(){
212. return this.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. return this.totalRowSize;
222.};
223.Page.prototype.setTotalRowSize = function(totalRowSize){
224. this.totalRowSize = totalRowSize;
225.};
226.Page.prototype.getPageRowSize = function(){
227. return this.pageRowSize;
228.};
229.Page.prototype.setPageRowSize = function(pageRowSize){
230. this.pageRowSize = pageRowSize;
231.};
232.Page.prototype.getFirstResult = function(){
233. if(this.getCurrPageNum()<=0) return 0;
234. return this.getPageRowSize() * (this.getCurrPageNum() - 1);
235.};
236.Page.prototype.getMaxResult = function(){
237. return this.getFirstResult() + this.getPageRowSize();
238.};
/*
* ===================AJAX异步分页=================
*
* Copyright 2012 8 23, zhutx
*
* 假设id为pageWidget的div是你放置分页控件的容器，则按如下形式调用：
* $("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize,{"pageRowSize":10});
* 参数说明：
* ------------Required-----------
* 参数一：请求URL
* 参数二：渲染结果集的页面容器
* 参数三：负责渲染结果集到页面的函数
* 参数四：总记录数
* ------------Optional-----------
* 参数五(json对象)：
* 属性pageRowSize:每页记录数(不配置，则默认为20)
* 属性param:请求参数(json格式)
*/
(function($){
var settings;
var page;
var paramStr;
$.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 = new Page(settings.currPageNum,settings.totalRowSize,settings.pageRowSize);
paramStr = makeParamStr(settings.param);
//开始获取数据
fetchData(page.getCurrPageNum());
return this;
};
/* 将json转换为请求参数字符串 */
var trunParamConfig2RequestParamStr = function(json){
var str = "";
for(key in json){
if(str==""){
str += key+"="+json[key];
}else{
str += "&"+key+"="+json[key];
}
}
return str;
};
/* 将配置参数拼接为请求字符串 */
var makeParamStr = function(param_json){
if(param_json==null){
return "";
}else{
return trunParamConfig2RequestParamStr(param_json);
}
};
/*
* 负责获取后台数据，获取完毕后会触发构建分页控件
*/
var fetchData = function(currPageNum){
page.setCurrPageNum(currPageNum);
var firstResult = page.getFirstResult();
var maxResult = page.getMaxResult();
var pageRowSize = page.getPageRowSize();
var data = 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"){
var error = eval('('+xmlHttpRequest.responseText+')');
alert("Sorry："+error.errorCode+"，"+error.message+"！");
}
}
});
};
var trunTargetPage = function(pageNum){
fetchData(pageNum);
}
/* 为分页控件绑定事件 */
var bindEvent = function(){
var links = settings.pageWidget.find("a");
$.each(links,function(i,link){
var link = $(link);
var pageNum = link.attr("pageNum");
link.click(function(){
trunTargetPage(pageNum);
});
});
}
/* 构建分页控件的具体算法实现 */
var buildPageWidget = function(page){
//构建分页控件前，先清理现有控件
settings.pageWidget.empty();
/* --------------- 下面开始进入真正的分页控件构建过程 -------------- */
/* --------------- 1.开始：构建描述信息（如“共？页，？条记录”） ----------------- */
settings.pageWidget.append("<div class='total'>共<span>"+page.getTotalPageNum()+"</span>页 <span>"+page.getTotalRowSize()+"</span>条记录</div>");
settings.pageWidget.append("<ul>");
/* --------------- 1.结束：构建描述信息（如“共？页，？条记录”） ----------------- */
/* --------------- 2.开始：构建“首页”和“上一页”控件 ------------- */
var currPageNum = Number(page.getCurrPageNum());
var totalPageNum = Number(page.getTotalPageNum());
if(currPageNum==1){
//如果你希望当前页是第一页的时候，也允许“首页”和“上一页”控件出现，则可以在这里进行补充
}else{
settings.pageWidget.find("ul").append("<li><a id='' pageNum='1' href='javascript:void(0);' title='首页' class='first'>首页</a></li>");
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+(currPageNum-1)+"' href='javascript:void(0);' title='上一页' class='prev'>上一页</a></li>");
}
/* --------------- 2.结束：构建“首页”和“上一页”控件 ------------- */
/* --------------- 3.开始：构建分页数字控件 -------------- */
if(totalPageNum<10){
for(var i=1;i<=totalPageNum;i++){
if(i==currPageNum){
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
}else{
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='javascript:trunTargetPage("+i+");'>"+i+"</a></li>");
}
}
//如果总页数>=10
}else{
//如果当前页小于5，则显示1-9项，且记忆当前项
if(currPageNum<5){
for(var i =1;i<10;i++){
if(i==currPageNum){
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
}else{
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class=''>"+i+"</a></li>");
}
}
//如果当前页>=5，且总页数与当前页的差<4
}else if(totalPageNum-currPageNum<4){
for(var i=totalPageNum-8;i<=totalPageNum;i++){
if(i==currPageNum){
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
}else{
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class=''>"+i+"</a></li>");
}
}
//如果当前页>=5，则显示围绕当前页的9项，且记忆当前项
}else{
for(var i=currPageNum-4;i<currPageNum+5;i++){
if(i==currPageNum){
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");
}else{
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void("+i+");' title='' class=''>"+i+"</a></li>");
}
}
}
}
/* --------------- 3.结束：构建分页数字控件 -------------- */
/* --------------- 4.开始：构建“下一页”和“尾页”控件 ------------- */
if(totalPageNum==currPageNum){
//如果你希望当前页是最后一页的时候，也允许“尾页”和“下一页”控件出现，则可以在这里进行补充
}else{
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+(currPageNum+1)+"' href='javascript:void(0);' title='下一页' class='next'>下一页</a></li>");
settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+totalPageNum+"' href='javascript:void(0);' title='尾页' class='last'>尾页</a></li>");
}
/* --------------- 4.结束：构建“下一页”和“尾页”控件 ------------- */
//还要为控件绑定点击事件
bindEvent();
}
})(jQuery);
/*
* Page类
*/
function Page(currPageNum,totalRowSize,pageRowSize){
this.currPageNum = currPageNum;
this.totalRowSize = totalRowSize;
this.pageRowSize = pageRowSize;
}
Page.prototype.getCurrPageNum = function(){
return this.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(){
return this.totalRowSize;
};
Page.prototype.setTotalRowSize = function(totalRowSize){
this.totalRowSize = totalRowSize;
};
Page.prototype.getPageRowSize = function(){
return this.pageRowSize;
};
Page.prototype.setPageRowSize = function(pageRowSize){
this.pageRowSize = pageRowSize;
};
Page.prototype.getFirstResult = function(){
if(this.getCurrPageNum()<=0) return 0;
return this.getPageRowSize() * (this.getCurrPageNum() - 1);
};
Page.prototype.getMaxResult = function(){
return this.getFirstResult() + this.getPageRowSize();
};
分享到：
发表评论
-
java 中的文件读取信息
2013-03-11 08:56 1076import java.io.BufferedReader ... -
oracle结果集的操作信息
2013-03-04 16:22 928众所周知的几个结果集集合操作命令，今天详细地测试了一下，发现一 ... -
js正则表达式（二）
2013-01-09 11:20 898首先加个重要的东西 * ... -
java路径问题以及java对文件的基本操作信息
2012-12-19 14:09 9871.基本概念的理解 绝对 ... -
JS正则表达式
2012-11-15 17:10 861function isTrueName(s) { var pa ... -
java公用类
2012-11-15 17:05 874package cn.org.jshuwei.j2ee.uti ... -
java规范信息
2012-10-30 08:44 28011 一、判断选择题（每题1分） 1. 表达式要在低优先级操作符 ... -
java时间公用和StringUnitl以及java调用存储过程
2012-10-16 17:38 16271 构建存储过程的语句信息 /** * 从Fun ... -
jquery批量删除
2012-09-20 14:31 3398<%@ page language="java ... -
java操作execl文件（2003与2007不兼容问题）
2012-09-19 14:49 1480package com.huawei.bss.execlCom ... -
java操作execl文件
2012-09-19 08:53 996package com.huawei.bss.execlCom ... -
通过onkeypress和onkeydown事件禁用键盘中某些键
2012-09-17 15:09 963http://zywang.iteye.com/blog/70 ... -
properties的修改
2012-09-14 16:05 1022public static void modifyProper ... -
java学习的一点记录
2012-09-12 16:15 1246public class Tools { stati ... -
STRUTS2与JSON的LIST和MAP对象返回
2012-09-07 14:57 6695<%@ page language="java ... -
struts2 iterator双重叠迭取值
2012-09-05 18:08 1267•效果：Map<String,List<Derpa ... -
struts2多个配置文件的应用
2012-09-05 10:10 1082<!-- 定义Struts2的核心Filter --&g ... -
java中使用net.sf.json对json进行解析
2012-09-04 12:24 1035作者： http://zhangnet1.iteye.com/ ... -
XML的TreeConfig
2012-09-04 10:20 921/** * <?xml version=&qu ... -
JSON与 STRuts2
2012-09-04 10:20 1319package com.huawei.cmclient.com ...
相关推荐
写了一个Jquery异步分页插件，拿出来分享一下，有不完善之处请指教。 以用户分页为例，先看一下效果，首先是第一页： 下一页或者点击第二页后： 点击尾页后： 效果还可以吧？来看看具体怎么用，首先后台要有一个...
Jquery扩展插件，图片异步分页浏览 Jquery扩展插件，图片异步分页浏览
使用方法和下载地址，请看：https://www.jq22.com/jquery-info22897
（1）异步分页插件flexgrid 1）前台js <%@ page language=Java contentType=text/html; charset=utf-8 pageEncoding=utf-8%> <!DOCTYPE ...
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
采用JQuery Pagination 插件，服务器端采用asp.net ashx，数据库操作采用LinQ TO Entity，实现异步分页操作实例。 具体介绍，详见：http://hi.baidu.com/tz666/item/73a676d9b171041821e250b0
很好用的jQuery分页插件，实现异步分页
用到的一些jquery插件： jquery.lazyload.js：图片预加载 jquery.pager.js：分页 jquery.dragsort.js：拖曳排序 jquery.ui.datepicker.js：日期控件 jquery.ad-gallery.js：相册 jquery.uploadify-3.1.js：多...
我一向是见招拆招的解决思路，这里需要运用到3个东西——标签页效果插件和分页插件，jquery的getJson请求。 因此我使用了jquery-ui插件，jquery-page插件,现提供下载地址：jquery_all.rar 里面包含了3个JS脚本文件...
用到的一些jquery插件： jquery.lazyload.js：图片预加载 jquery.pager.js：分页 jquery.dragsort.js：拖曳排序 jquery.ui.datepicker.js：日期控件 jquery.ad-gallery.js：相册 jquery.uploadify-3.1.js：多...
用到的一些jquery插件： jquery.lazyload.js：图片预加载 jquery.pager.js：分页 jquery.dragsort.js：拖曳排序 jquery.ui.datepicker.js：日期控件 jquery.ad-gallery.js：相册 jquery.uploadify-3.1.js：多...
用到的一些jquery插件： jquery.lazyload.js：图片预加载 jquery.pager.js：分页 jquery.dragsort.js：拖曳排序 jquery.ui.datepicker.js：日期控件 jquery.ad-gallery.js：相册 jquery.uploadify-3.1.js：多...
用到的一些jquery插件： jquery.lazyload.js：图片预加载 jquery.pager.js：分页 jquery.dragsort.js：拖曳排序 jquery.ui.datepicker.js：日期控件 jquery.ad-gallery.js：相册 jquery.uploadify-3.1.js：多...
特征:轻量没有 CSS 可自定义 异步分页加载大型选项列表 (read: AJAX-ready-and-enabled)再也个分离或隐藏的 DOM 节点初始化 编程方式可选且多变 Unit-tested代码示例：$('select').on('ready', function() { $('...
有时候大数据量进行查询操作的时候，查询速度很大强度上可以影响用户体验，因此自己简单写了一个demo，简单总结记录一下： ...两外一种采用 ajax异步加载分页 采用比较常用的jquery.pagination 分页插件。
前端用了jquery、jquery分页插件（懒得写）、layer弹层（实在不想自己写弹层了），因为不能用ajax，所以添加方法成功直接刷新列表，失败则跳到错误页面。servlet使用注解方式，另外一个servlet可以处理多个请求，...
本文实例为大家分享了laypage.js分页插件的使用方法，供大家参考，具体内容如下 1、引用依赖 a.layui.js b.layui.css c.laypage.js ... //以下将以jquery.ajax为例，演示一个异步分页 $.getJSON('../
Infinite Ajax Scroll 简称 ias，无限的ajax滚动，是一款jQuery滚动ajax分页插件，当页面滚动到容器可见部分将自动异步加载数据。
最近做一个AJAX的GridView来显示数据，当然按照现在流行的首选是Jquery。