mybaties分页+自定义前台

  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+"()\"> &nbsp;";
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+"()\"> &nbsp;";
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: 20621@163.com
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: 20621@163.com
331   * @CreateDate: 2015年6月21日
332   */
333  public List<User> getUserList(Page page);
334  
335  /**
336   * 
337   * @Description:查询记录条数
338   * @Author: 任路
339   * @Emal: 20621@163.com
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 }