第一步:分页对象的封装(在分页类重写toString()方法,内部用stringBuffer字符串,动态拼接分页的html代码。在页面上${page})
1 @Override 2 public String toString() { 3 StringBuffer pageHtml=new StringBuffer(); 4 pageHtml.append("<div class="pagin">"); 5 pageHtml.append("<div class="message">共<i class="blue">"+this.getCountRecords()+"</i>条记录,当前显示第 <i class="blue">"+this.getCurrentPageNum()+" </i>页</div>"); 6 pageHtml.append("<ul class="paginList">"); 7 //设置上一页 8 if(getPrevPageNum()>0){ 9 pageHtml.append("<li class="paginItem"><a href="javascript:void(0);" onclick="pageTo('"+getPrevPageNum()+"')"><span class="pagepre"></span></a></li>"); 10 } 11 for(Integer i:getListPages()){ 12 String className="paginItem"; 13 if(i.intValue() == getCurrentPageNum()){ 14 className="'paginItem current'"; 15 } 16 pageHtml.append("<li class="+className+"><a href="javascript:void(0);" onclick="pageTo('"+i+"')">"+i+"</a></li>"); 17 } 18 //设置(更多)... 19 if(!getListPages().contains(getCountPages())){ 20 pageHtml.append("<li class="paginItem more"><a href="javascript:void(0);">...</a></li>"); 21 pageHtml.append("<li class="paginItem"><a href="javascript:void(0);" onclick="pageTo('"+getCountPages()+"')">"+getCountPages()+"</a></li>"); 22 } 23 //设置下一页 24 if(getNextPageNum() > getCurrentPageNum()){ 25 pageHtml.append("<li class="paginItem"><a href="javascript:void(0);" onclick="pageTo('"+getNextPageNum()+"')"><span class="pagenxt"></span></a></li>"); 26 } 27 28 pageHtml.append("</ul>"); 29 pageHtml.append("</div>"); 30 return pageHtml.toString(); 31 }
第二步:在列表页编写js代码。和分页的html代码结合使用。从而实现分页。
1 /** 2 *进入分页 3 * @param num 4 */ 5 function pageTo(num){ 6 var url; 7 var href=window.location.href; 8 var ind=href.lastIndexOf("&num"); 9 if(ind>0){ 10 url=(href.split("&num"))[0]; 11 }else{ 12 url=(href.split("num"))[0]; 13 } 14 var index=url.lastIndexOf("?"); 15 if(index>0){ 16 href=url+"&num="+num; 17 }else{ 18 href=url+"?num="+num; 19 } 20 window.location.href=href; 21 }