【SSH项目实战】国税协同平台-26.分页功能编写

于 2015-12-11 16:30:38 发布
阅读量707 收藏 1
点赞数
分类专栏： SSH项目实战 文章标签： 项目实战 管理 ssh 框架 界面
可以看到，我们之前的用户管理、角色管理和信息发布管理的列表下均有这些东西:
总共1条记录，当前第 1 页，共 1 页    上一页  下一页 到 

这个就是美工留给我们做分页的，我们接下来就以信息发布管理模块为例做一个分页功能。

我们在做之前首先分析一下我们分页的规则:
总共1条记录，当前第 1 页，共 1 页    上一页  下一页 到  

属性有:
总记录数
当前页号
总页数
页大小
列表记录

使用例子:
共6条记录，每页3条，共2页

总页数 = 总记录数/页大小

共7条记录，每页3条，共3页

tem = 总记录数/页大小;

总页数 = （总记录数%页大小==0）?tem:(tem+1)

页号；当总记录数为0时，页号为0

总共30条记录，每页10条，第2页的数据从第10开始(因为第一页从0开始)

下面开始进行分页功能的编写:
首先我们创建一个分页对象:
[java]  view plain copy
  1. package cn.edu.hpu.tax.core.page;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. public class PageResult {  
  7.       
  8.     //总记录数  
  9.     private long totalCount;  
  10.     //当前页号  
  11.     private int pageNo;  
  12.     //总页数  
  13.     private int totalPageCount;  
  14.     //页大小  
  15.     private int pageSize;   
  16.     //列表记录  
  17.     private List items;  
  18.       
  19.     public PageResult(){  
  20.           
  21.     }  
  22.       
  23.     //计算总页数  
  24.     public PageResult(long totalCount, int pageNo, int pageSize, List items) {  
  25.         super();  
  26.         this.totalCount = totalCount;  
  27.         this.pageNo = pageNo;  
  28.         this.pageSize = pageSize;  
  29.         this.items = items==null?new ArrayList():items;  
  30.         if(totalCount!=0){  
  31.             //计算总数  
  32.             int tem=(int)totalCount/pageSize;  
  33.             this.totalPageCount=(totalCount%pageSize==0)?tem:(tem+1);  
  34.         }else{  
  35.             this.pageNo=0;  
  36.         }  
  37.     }  
  38.   
  39.   
  40.     public long getTotalCount() {  
  41.         return totalCount;  
  42.     }  
  43.     public void setTotalCount(long totalCount) {  
  44.         this.totalCount = totalCount;  
  45.     }  
  46.     public int getPageNo() {  
  47.         return pageNo;  
  48.     }  
  49.     public void setPageNo(int pageNo) {  
  50.         this.pageNo = pageNo;  
  51.     }  
  52.     public int getTotalPageCount() {  
  53.         return totalPageCount;  
  54.     }  
  55.     public void setTotalPageCount(int totalPageCount) {  
  56.         this.totalPageCount = totalPageCount;  
  57.     }  
  58.     public int getPageSize() {  
  59.         return pageSize;  
  60.     }  
  61.     public void setPageSize(int pageSize) {  
  62.         this.pageSize = pageSize;  
  63.     }  
  64.     public List getItems() {  
  65.         return items;  
  66.     }  
  67.     public void setItems(List items) {  
  68.         this.items = items;  
  69.     }  
  70. }  

我们以后页面上的所有数据都会从分页对象中去取了。
我们下面来使用我们写的分页对象进行分页功能的编写。

我们在信息发布管理模块的InfoAction中引入分页对象PageResult、页号pageNo和页大小pageSize(get和set方法也要写):
[java]  view plain copy
  1. //分页对象  
  2. private PageResult pageResult;  
  3. //页号  
  4. private int pageNo;  
  5. //页大小  
  6. private int pageSize;  
  7.   
  8.   
  9. public PageResult getPageResult() {  
  10.     return pageResult;  
  11. }  
  12. public void setPageResult(PageResult pageResult) {  
  13.     this.pageResult = pageResult;  
  14. }  
  15. public int getPageNo() {  
  16.     return pageNo;  
  17. }  
  18. public void setPageNo(int pageNo) {  
  19.     this.pageNo = pageNo;  
  20. }  
  21. public int getPageSize() {  
  22.     //给的默认的分页大小  
  23.     if(pageSize < 1) pageSize = 4;  
  24.     return pageSize;  
  25. }  
  26. public void setPageSize(int pageSize) {  
  27.     this.pageSize = pageSize;  
  28. }  

并且我们的查询也随着分页发生改变，我们的每次都要根据当前页数来查询分配数据，这里我们修改一下InfoAction的listUI方法:
[java]  view plain copy
  1. //列表页面  
  2. public String listUI() throws Exception{  
  3.     try {  
  4.         //加载分类集合  
  5.         ActionContext.getContext().getContextMap().put("infoTypeMap", Info.INFO_TYPE_MAP);  
  6.         QueryHelper queryHelper=new QueryHelper(Info.class,"i");  
  7.         if(info != null){  
  8.             if(StringUtils.isNotBlank(info.getTitle())){  
  9.                 info.setTitle(URLDecoder.decode(info.getTitle(),"utf-8"));  
  10.                 queryHelper.addCondition("i.title like ?", "%"+info.getTitle()+"%");  
  11.             }  
  12.             queryHelper.addCondition("i.state = ?", "1");  
  13.         }  
  14.         //根据创建时间降序排序  
  15.         queryHelper.addOrderByProperty("i.createTime", queryHelper.ORDER_BY_DESC);  
  16.         pageResult=infoService.getPageResult(queryHelper,getPageNo(),getPageSize());  
  17.     } catch (Exception e) {  
  18.         throw new Exception(e.getMessage());  
  19.     }  
  20.     return "listUI";  
  21. }  

可以看到，我们infoService.getPageResult()方法是没有编写的，我们在baseService中去编写这个方法:
BaseService:
[java]  view plain copy
  1. //分页  
  2. public PageResult getPageResult(QueryHelper queryHelper, int pageNo, int pagNo,int pageSize);  

BaseServiceImpl:
[java]  view plain copy
  1. @Override  
  2. public PageResult getPageResult(QueryHelper queryHelper, int pageNo,  
  3.         int pageSize) {  
  4.     return baseDao.getPageResult(queryHelper,pageNo,pageSize);  
  5. }  

然后我们在BaseDao中实现getPageResult方法:
BaseDao中:
[java]  view plain copy
  1. //分页  
  2. public PageResult getPageResult(QueryHelper queryHelper, int pageNo,  
  3.         int pageSize);  

BaseDaoImpl中:
[java]  view plain copy
  1. @Override  
  2. public PageResult getPageResult(QueryHelper queryHelper, int pageNo,  
  3.         int pageSize) {  
  4.     Query query=getSession().createQuery(queryHelper.getQueryListHql());  
  5.     List<Object> parameters=queryHelper.getParameters();  
  6.     //添加查询条件  
  7.     if(parameters!=null){  
  8.         for (int i = 0; i < parameters.size(); i++) {  
  9.             query.setParameter(i, parameters.get(i));  
  10.         }  
  11.     }  
  12.     //进行分页  
  13.     if(pageNo<1) pageNo=1;  
  14.       
  15.     query.setFirstResult((pageNo-1)*pageSize);//设置数据起始索引号  
  16.     query.setMaxResults(pageSize);  
  17.     List items=query.list();  
  18.       
  19.     //获取总记录数  
  20.     Query queryCount=getSession().createQuery(queryHelper.getQueryCountHql());  
  21.     if(parameters!=null){  
  22.         for (int i = 0; i < parameters.size(); i++) {  
  23.             queryCount.setParameter(i, parameters.get(i));  
  24.         }  
  25.     }  
  26.     long totalCount=(Long)queryCount.uniqueResult();  
  27.     return new PageResult(totalCount, pageNo, pageSize, items);  
  28. }  

在上面的代码中，我们使用了queryHelper.getQueryCountHql()方法来获取一个查询总记录数的hql语句，这个方法我们还没有，我们在QueryHelper类中添加这个方法:
[java]  view plain copy
  1. //查询统计数的hql语句  
  2. public String getQueryCountHql(){  
  3.     return "SELECT COUNT(*) "+fromClause+whereClause;  
  4. }  

我们通过BaseService和BaseDao在InfoAction的listUI方法中获取到我们的分页查询对象PageRueslt了，我们下面就在相应的信息发布管理列表模块的jsp中去使用它:
[html]  view plain copy
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>  
  2. <html>  
  3. <head>  
  4.     <%@include file="/common/header.jsp"%>  
  5.     <title>信息发布管理</title>  
  6.     <script type="text/javascript">  
  7.     //全选、全反选  
  8.     function doSelectAll(){  
  9.         // jquery 1.6 前  
  10.         //$("input[name=selectedRow]").attr("checked", $("#selAll").is(":checked"));  
  11.         //prop jquery 1.6+建议使用  
  12.         $("input[name=selectedRow]").prop("checked", $("#selAll").is(":checked"));        
  13.     }  
  14.     //新增  
  15.     function doAdd(){  
  16.         document.forms[0].action = "${basePath}tax/info_addUI.action";  
  17.         document.forms[0].submit();  
  18.     }  
  19.     //编辑  
  20.     function doEdit(id){  
  21.         document.forms[0].action = "${basePath}tax/info_editUI.action?info.infoId=" + id;  
  22.         document.forms[0].submit();  
  23.     }  
  24.     //删除  
  25.     function doDelete(id){  
  26.         document.forms[0].action = "${basePath}tax/info_delete.action?info.infoId=" + id;  
  27.         document.forms[0].submit();  
  28.     }  
  29.     //批量删除  
  30.     function doDeleteAll(){  
  31.         document.forms[0].action = "${basePath}tax/info_deleteSelected.action";  
  32.         document.forms[0].submit();  
  33.     }  
  34.     //异步发布信息，信息的id以及将要改成的状态值  
  35.     function doPublic(infoId,state){  
  36.         //1.更新信息状态  
  37.         $.ajax({  
  38.             url:"${basePath}tax/info_publicInfo.action",  
  39.             data:{"info.infoId":infoId,"info.state":state},  
  40.             type:"post",  
  41.             success:function(msg){  
  42.                 //2.更新状态栏，操作栏的显示值  
  43.                 if("更新状态成功"==msg){  
  44.                     if(state==1){  
  45.                         //说明信息状态已经被改成发布，操作栏被改为停用  
  46.                         $("#show_"+infoId).html("发布");  
  47.                         $("#oper_"+infoId).html('<a href="javascript:doPublic(\''+infoId+'\',0)">停用</a>');  
  48.                     }else{  
  49.                         $("#show_"+infoId).html("停用");  
  50.                         $("#oper_"+infoId).html('<a href="javascript:doPublic(\''+infoId+'\',1)">发布</a>');  
  51.                     }  
  52.                 }else{  
  53.                     alert("更新信息状态失败!");  
  54.                 }  
  55.             },  
  56.             error:function(){  
  57.                 alert("更新信息状态失败!");  
  58.             }  
  59.         });  
  60.           
  61.     }     
  62.     function doSearch(){  
  63.         document.forms[0].action = "${basePath}tax/info_listUI.action";  
  64.         document.forms[0].submit();  
  65.     }  
  66.     </script>  
  67. </head>  
  68. <body class="rightBody">  
  69. <form name="form1" action="" method="post">  
  70.     <div class="p_d_1">  
  71.         <div class="p_d_1_1">  
  72.             <div class="content_info">  
  73.                 <div class="c_crumbs"><div><b></b><strong>信息发布管理</strong></div> </div>  
  74.                 <div class="search_art">  
  75.                     <li>  
  76.                         信息标题：<s:textfield name="info.title" cssClass="s_text" id="infoTitle"  cssStyle="width:160px;"/>  
  77.                     </li>  
  78.                     <li><input type="button" class="s_button" value="搜 索" onclick="doSearch()"/></li>  
  79.                     <li style="float:right;">  
  80.                         <input type="button" value="新增" class="s_button" onclick="doAdd()"/>   
  81.                         <input type="button" value="删除" class="s_button" onclick="doDeleteAll()"/>   
  82.                     </li>  
  83.                 </div>  
  84.   
  85.   
  86.                 <div class="t_list" style="margin:0px; border:0px none;">  
  87.                     <table width="100%" border="0">  
  88.                         <tr class="t_tit">  
  89.                             <td width="30" align="center"><input type="checkbox" id="selAll" onclick="doSelectAll()" /></td>  
  90.                             <td align="center">信息标题</td>  
  91.                             <td width="120" align="center">信息分类</td>  
  92.                             <td width="120" align="center">创建人</td>  
  93.                             <td width="140" align="center">创建时间</td>  
  94.                             <td width="80" align="center">状态</td>  
  95.                             <td width="120" align="center">操作</td>  
  96.                         </tr>  
  97.                         <s:iterator value="pageResult.items" status="st">  
  98.                             <tr <s:if test="#st.odd"> bgcolor="f8f8f8" </s:if> >  
  99.                                 <td align="center"><input type="checkbox" name="selectedRow" value="<s:property value='infoId'/>"/></td>  
  100.                                 <td align="center"><s:property value="title"/></td>  
  101.                                 <td align="center">  
  102.                                     <s:property value="#infoTypeMap[type]"/>    
  103.                                 </td>  
  104.                                 <td align="center"><s:property value="creator"/></td>  
  105.                                 <td align="center"><s:date name="createTime" format="yyyy-MM-dd HH:mm"/></td>  
  106.                                 <td id="show_<s:property value='infoId'/>" align="center"><s:property value="state==1?'发布':'停用'"/></td>  
  107.                                 <td align="center">  
  108.                                     <span id="oper_<s:property value='infoId'/>">  
  109.                                     <s:if test="state==1">  
  110.                                         <a href="javascript:doPublic('<s:property value='infoId'/>',0)">停用</a>  
  111.                                     </s:if><s:else>  
  112.                                         <a href="javascript:doPublic('<s:property value='infoId'/>',1)">发布</a>  
  113.                                     </s:else>  
  114.                                     </span>  
  115.                                     <a href="javascript:doEdit('<s:property value='infoId'/>')">编辑</a>  
  116.                                     <a href="javascript:doDelete('<s:property value='infoId'/>')">删除</a>  
  117.                                 </td>  
  118.                             </tr>  
  119.                         </s:iterator>  
  120.                     </table>  
  121.                 </div>  
  122.             </div>  
  123.         <div class="c_pate" style="margin-top: 5px;">  
  124.         <!-- 如果页数为空不显示分页选项 -->  
  125.         <s:if test="pageResult.totalCount > 0">  
  126.         <table width="100%" class="pageDown" border="0" cellspacing="0"  
  127.             cellpadding="0">  
  128.             <tr>  
  129.                 <td align="right">  
  130.                     总共<s:property value="pageResult.totalCount"/>条记录，当前第 <s:property value="pageResult.pageNo"/> 页，  
  131.                     共 <s:property value="pageResult.totalPageCount"/> 页   
  132.                     <!-- 非第一页才有“上一页”选项 -->  
  133.                     <s:if test="pageResult.pageNo>1">  
  134.                           <a href="javascript:doGoPage(<s:property value='pageResult.pageNo-1'/>)">上一页</a>  
  135.                     </s:if>  
  136.                     <!-- 非最后一页才有“下一页”选项 -->  
  137.                     <s:if test="pageResult.pageNo < pageResult.totalPageCount">  
  138.                           <a href="javascript:doGoPage(<s:property value='pageResult.pageNo+1'/>)">下一页</a>  
  139.                     </s:if>  
  140.                     到 <input id="pageNo" name="pageNo" type="text" style="width: 30px;" onkeypress="if(event.keyCode == 13){doGoPage(this.value);}" min="1"  
  141.                     max="" value="<s:property value="pageResult.pageNo"/>" />     
  142.                 </td>  
  143.             </tr>  
  144.         </table>  
  145.         </s:if><s:else>暂无数据!</s:else>   
  146.         </div>  
  147.         <script type="text/javascript">  
  148.         //翻页方法  
  149.         function doGoPage(pageNo){  
  150.             document.getElementById("pageNo").value = pageNo;  
  151.             document.forms[0].action="${basePath}tax/info_listUI.action";  
  152.             document.forms[0].submit();  
  153.         }  
  154.         </script>  
  155.         </div>  
  156.     </div>  
  157. </form>  
  158.   
  159.   
  160. </body>  
  161. </html>  

我们下面来测试，我们之前在信息发布区域管理存了8条新闻，按照我们预想的，我们每次只取出4条数据(pageSize默认为4)，然后一共8条记录，一共是2页，我们来点击看一下是不是这样:


结果如我们所想，点击下一页的时候可以看到剩下的四条新闻:

至此我们的分页功能完成。

月轩居士
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值