1 Springmvc+mybaties
2
3 JSP:
4 <!--右侧区域start-->
5 <td width="100%" class="ver01" >
6 <div class="box2" panelTitle="查询" showStatus="false" id="chaxundiv">
7 <form action="../../getUsersOfPager.action" id="queryForm" method="post">
8 <input type="hidden" id="parentId" name="parentId" value="${parentId}"/>
9 <table>
10 <tr>
11 <td>姓名：</td>
12 <td>
13 <input type="text" id="searchInput" name="userinfor.userName"/>
14 <input type="text" style="width:2px;display:none;"/>
15 </td>
16 <td><button type="button" onclick="searchHandler(true)"><span class="icon_find">查询</span></button></td>
17 <td><button type="button" onclick="resetSearch()"><span class="icon_reload">重置查询</span></button></td>
18 </tr>
19 </table>
20 </form>
21 </div>
22
23
24 <div class="padding_right5">
25 <div id="dataBasic">
26
27 </div>
28 </div>
29 </td>
30 <!--右侧区域end-->
31
32
33
34 JS:
35
36 //页面引用的js
37
38 var parentId="root";
39 var pagenum=1;
40 var pagesize=5;
41
42 var config=[
43 {display:‘姓名‘,name:‘username‘,align:‘center‘,width:‘10%‘},
44 {display:‘性别‘,name:‘sex‘,align:‘center‘,width:‘10%‘},
45 {display:‘邮箱‘,name:‘email‘,align:‘center‘,width:‘10%‘},
46 {display:‘出生日期‘,name:‘birthday‘,align:‘center‘,width:‘10%‘},
47 {display:‘籍贯‘,name:‘nativeplace‘,align:‘center‘,width:‘10%‘}
48 ];
49
50 $( function() {
51 initGrid();
52 });
53
54
55 function initGrid(){
56
57 var url="../../../getUserList.do";
58 var query=$("#searchInput").val();
59 var params={departmentId:parentId,query:query,pagenum:pagenum,pagesize:pagesize};
60 loadGrid(url, params, config, pagenum, pagesize, "dataBasic",toolbar);
61
62 }
63
64
65
66
67 //分页用js
68
69 var url;
70 var params;
71 var config;
72 var div;
73 var pagesize=5;
74 var colspan=0;
75 var toolbar;
76
77 function loadGrid(url,params,config,current,pagesize,div,toolbar){
78 this.url=url;
79 this.params=params;
80 this.config=config;
81 this.div=div;
82 this.pagesize=pagesize;
83 this.toolbar=toolbar;
84 colspan=config.length;
85 loadData(current);
86 }
87
88 function loadData(current){
89 this.params.currentpage=current;
90 $.ajax({
91 type : ‘POST‘,
92 url : url,
93 data : params,
94 success : function(s){
95
96
97 //没有数据
98 if(s=="{}"){
99 var html="<table width=\"100%\" class=\"tableStyle\">";
100
101
102 //构造工具栏
103 if(typeof(toolbar) != "undefined" && toolbar.length>0){
104 html+="<tr><td colspan=‘"+colspan+"‘>";
105 for(var i=0;i<toolbar.length;i++){
106 var name=toolbar[i]["name"];
107 var iconClass=toolbar[i]["iconClass"];
108 var onClick=toolbar[i]["onClick"];
109 var btn="<input type=\"button\" value=\""+name+"\" class=\""+iconClass+"\" onclick=\""+onClick+"()\"> ";
110 html+=btn;
111 }
112 html+="</tr>";
113 }
114 //构造工具栏完成
115
116
117 //构造表头
118 html+="<tr>";
119 for(var i=0;i<config.length;i++){
120 var display=config[i]["display"];
121 var width=config[i]["width"];
122 var align=config[i]["align"];
123 if(align==""){
124 align="left";
125 }
126
127 html+="<th width=\""+width+"\" align=\""+align+"\">"+display+"</th>";
128 }
129 html+="</tr>";
130 //表头构造完毕
131
132
133
134
135 html+="</table>";
136 document.getElementById(div).innerHTML=html;
137
138
139 }else{
140
141
142 var result=eval("("+s+")");
143
144 var html="<table width=\"100%\" class=\"tableStyle\">";
145
146 //构造工具栏
147 if(typeof(toolbar) != "undefined" && toolbar.length>0){
148 html+="<tr><td colspan=‘"+colspan+"‘>";
149 for(var i=0;i<toolbar.length;i++){
150 var name=toolbar[i]["name"];
151 var iconClass=toolbar[i]["iconClass"];
152 var onClick=toolbar[i]["onClick"];
153 var btn="<input type=\"button\" value=\""+name+"\" class=\""+iconClass+"\" onclick=\""+onClick+"()\"> ";
154 html+=btn;
155 }
156 html+="</tr>";
157 }
158 //构造工具栏完成
159
160
161
162 //构造表头
163 html+="<tr>";
164 for(var i=0;i<config.length;i++){
165 var display=config[i]["display"];
166 var width=config[i]["width"];
167 var align=config[i]["align"];
168 if(align==""){
169 align="left";
170 }
171 html+="<th width=\""+width+"\" align=\""+align+"\">"+display+"</th>";
172 }
173 html+="</tr>";
174 //表头构造完毕
175
176
177
178 //构造表格数据
179 for(var i=0;i<result.rows.length;i++){
180
181 html+="<tr>";
182
183 for(var j=0;j<config.length;j++){
184 var name=config[j]["name"];
185
186 if(name!="" && typeof(name) != "undefined"){
187 var value=result.rows[i][name];
188 var align=config[j]["align"];
189
190 if(align==""){
191 align="left";
192 }
193 html+="<td align=\""+align+"\">"+value+"</td>";
194
195
196 }else{
197
198 var align=config[j]["align"];
199 if(align==""){
200 align="left";
201 }
202 var render=config[j]["render"];
203 var onclick=config[j]["onclick"];
204 var params=config[j]["params"].split(",");
205 var c=onclick+"(";
206 for(var k=0;k<params.length;k++){
207 var p=params[k];
208 var value=result.rows[i][p];
209 c+="‘"+value+"‘";
210 if(k<params.length-1){
211 c+=",";
212 }
213 }
214 c+=")";
215 var btn="<input type=\"button\" value=\""+render+"\" onclick=\""+c+"\">";
216 html+="<td align=\""+align+"\">"+btn+"</td>";
217 }
218 }
219 html+="</tr>";
220 }
221 //构造表格数据完毕
222
223 //构造分页组件
224 var totalresult=parseInt(result.totalRows);//总页数
225
226 var totalpage=0;
227 if(totalresult%pagesize==0){
228 totalpage=parseInt(totalresult/pagesize);
229 }else{
230 totalpage=parseInt(totalresult/pagesize)+1;
231 }
232 var haslast=false;
233 var hasnext=false;
234 //当前页大于0，表示有上一页
235 if(current>0){
236 haslast=true;
237 }
238
239 if((current+1)<totalpage){
240 hasnext=true;
241 }
242
243 html+="<tr><td colspan=\""+colspan+"\" align=\"right\">";
244
245 if(haslast){
246 html+="<input type=\"button\" value=\"上一页\" onclick=\"loadData("+(current-1)+")\">";
247 }else{
248 html+="<input type=\"button\" value=\"上一页\" disabled=\"disabled\">";
249 }
250 if(hasnext){
251 html+="<input type=\"button\" value=\"下一页\" onclick=\"loadData("+(current+1)+")\">";
252 }else{
253 html+="<input type=\"button\" value=\"下一页\" disabled=\"disabled\">";
254 }
255 html+="</tr>";
256 html+="</table>";
257 document.getElementById(div).innerHTML=html;
258 }
259
260 },
261 error : function(a){
262 top.Dialog.alert("访问服务器端出错！");
263 },
264 });
265 }
266
267
268
269
270 java后台 Controller getUserList.do
271
272
273 /**
274 *
275 * @Description:分页
276 * @Author: 任路
277 * @Emal: [email protected]
278 * @CreateDate: 2015年6月21日
279 */
280 @RequestMapping("/getUserList.do")
281 public void getUserList(HttpServletRequest request,HttpServletResponse response){
282
283 String pagesize=request.getParameter("pagesize");
284 String pagenum=request.getParameter("pagenum");
285
286 String departmentId=request.getParameter("departmentId");
287 String query=request.getParameter("query");
288
289 Map<String,String> map=new HashMap<String, String>();
290 map.put("pagesize", pagesize);
291 map.put("pagenum", pagesize);
292 map.put("departmentId", departmentId);
293 map.put("query",query);
294
295 Page p=new Page();
296 p.setPagesize(Integer.parseInt(pagesize));
297 p.setPagenum(Integer.parseInt(pagenum));
298 p.setParams(map);
299
300
301 List<User> list=userService.getUserList(p);
302
303 //查询总数
304 int total=userService.totalUser(map);
305
306
307 StringBuffer sb=new StringBuffer();
308 if(total>0){
309 sb.append("{‘totalRows‘:").append(total).append(",‘rows‘:");
310 JSONArray ja=JSONArray.fromObject(list);
311 sb.append(ja.toString());
312 sb.append("}");
313 }else{
314 sb.append("{}");
315
316 }
317
318 JSONObject json=JSONObject.fromObject(sb.toString());
319 writetoPage(response, json.toString());
320
321
322 }
323
324
325 //Dao层
326 /**
327 *
328 * @Description:分页查询数据
329 * @Author: 任路
330 * @Emal: [email protected]
331 * @CreateDate: 2015年6月21日
332 */
333 public List<User> getUserList(Page page);
334
335 /**
336 *
337 * @Description:查询记录条数
338 * @Author: 任路
339 * @Emal: [email protected]
340 * @CreateDate: 2015年6月21日
341 */
342
343 public int totalUser(Map<String,String> map);
344
345
346
347
348
349 XML
350 <!-- 查询-->
351 <select id="getUserList" resultMap="user" parameterType="page"> <!-- 在sqlMapConfig中定义了别名 -->
352 SELECT org_user.*
353 FROM org_user ,userdepartment
354 WHERE org_user.userid=userdepartment.userid
355
356 <if test="params.departmentId!=null and params.departmentId!=‘‘">
357 AND userdepartment.departmentid=#{params.departmentId}
358 </if>
359
360 <if test="params.query!=null and params.query!=‘‘">
361 AND org_user.username like ‘%${params.query}%‘
362 </if>
363
364 LIMIT #{startPos}, #{pagesize}
365
366
367 </select>
368
369
370 <!-- 查询总数 -->
371 <select id="totalUser" resultType="Integer" parameterType="map" >
372 SELECT count(1)
373 FROM org_user ,userdepartment where
374 org_user.USERID=userdepartment.USERID
375
376 <if test="departmentId!=null and departmentId!=‘‘">
377 AND userdepartment.DEPARTMENTID=#{departmentId}
378 </if>
379 <if test="query!=null and query!=‘‘">
380 and org_user.USERNAME like ‘%${query}%‘
381 </if>
382 </select>
383
384
385
386
387
388
389
390 Page:
391
392
393 package com.renlu.page;
394
395 import java.io.Serializable;
396 import java.util.Map;
397
398 public class Page implements Serializable{
399
400 /**
401 *
402 */
403 private static final long serialVersionUID = 1L;
404
405
406 private int pagenum=1;//第几页
407 private int pagesize=5;//每页的大小
408 private int totalnum;//总数
409 private int totalpage;//总页数
410 private boolean haslast;//是否有上一页
411 private boolean hasnext;//是否有下一页
412 private int startPos;//起始的行号，即数据从第几条开始查询
413
414 private Map<String,String> params;//定义Map参数用
415
416
417 public int getStartPos() {
418 return (pagenum-1)*pagesize;
419 }
420 public void setStartPos(int startPos) {
421 this.startPos = startPos;
422 }
423
424 public int getPagenum() {
425 return pagenum;
426 }
427 public void setPagenum(int pagenum) {
428 this.pagenum = pagenum;
429 }
430 public int getPagesize() {
431 return pagesize;
432 }
433 public void setPagesize(int pagesize) {
434 this.pagesize = pagesize;
435 }
436 public int getTotalnum() {
437 return totalnum;
438 }
439 public void setTotalnum(int totalnum) {
440 this.totalnum = totalnum;
441 }
442 public int getTotalpage() {
443
444 if(totalnum%pagesize==0){
445
446 return totalnum/pagesize;
447
448 }else{
449
450 return totalnum/pagesize+1;
451 }
452
453
454
455 }
456 public void setTotalpage(int totalpage) {
457 this.totalpage = totalpage;
458 }
459
460 //是否有上一页
461 public boolean isHaslast() {
462
463 return pagenum>1;
464 }
465 public void setHaslast(boolean haslast) {
466 this.haslast = haslast;
467 }
468
469 //是否有下一页
470 public boolean isHasnext() {
471
472 return pagenum<totalpage; //当前页小于总页数，就有下一页
473 }
474
475 public void setHasnext(boolean hasnext) {
476 this.hasnext = hasnext;
477 }
478 public Map<String, String> getParams() {
479 return params;
480 }
481 public void setParams(Map<String, String> params) {
482 this.params = params;
483 }
484
485
486
487
488 }
时间： 2024-10-15 00:53:22