简单的分页制作

最新推荐文章于 2022-04-07 17:07:59 发布

K_122

最新推荐文章于 2022-04-07 17:07:59 发布

阅读量938

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/K_122/article/details/75514668

本文介绍了如何制作一个简单的分页系统，包括创建pageUI.jsp页面，使用pageBean和pageInfo处理分页数据，提供分页查询方法，并在Action中处理分页标识。分页过程采用Ajax异步更新，实现页面局部刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.制作一个带首页，上一页，下一页，末页这样的页面命名为pageUI.jsp

页面代码（例子，可以参考）

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<tr>
      <td width="100%" height="1"  colspan="2">
        <table border="0" width="100%" cellspacing="0" cellpadding="0">
         <s:if test="#request.page!=null">
         		<tr>
		             <td width="15%" align="left">总记录数：<s:property value="%{#request.page.totalResult}"/>条</td> 
		             <td width="14%" align="right"></td>   
		             <s:if test="#request.page.firstPage">
		             	<td width="8%" align="center">首页  |</td>
		             	<td width="10%" align="center">上一页   |</td>
		             </s:if>   
		             <s:else>
		             	<td width="8%" align="center"><u><a href="#" onClick="gotopage('elecUserAction_home.do','start')">首页  |</a></u></td>
		             	<td width="10%" align="center"><u><a href="#" onClick="gotopage('elecUserAction_home.do','prev')">上一页   |</a></u></td>
		             </s:else>
		             <s:if test="#request.page.lastPage">
					 	<td width="10%" align="center">下一页   |</td>
		             	<td width="8%" align="center">末页</td>
		             </s:if>
		             <s:else>
		             	<td width="10%" align="center"><u><a href="#" onClick="gotopage('elecUserAction_home.do','next')">下一页   |</a></u></td>
		             	<td width="8%" align="center"><u><a href="#" onClick="gotopage('elecUserAction_home.do','end')">末页</a></u></td>
		             </s:else>
		             <td width="6%" align="center">第<s:property value="%{#request.page.pageNo}"/>页</td>
		             <td width="6%" align="center">共<s:property value="%{#request.page.sumPage}"/>页</td>
		             <td width="21%" align="right">至第<input size="1" type="text" name="goPage" >页
		
		
		
		             <u><a href="#" onClick="gotopage('elecUserAction_home.do','go')">确定</a></u></td>
		             
		             <td><input type="hidden" name="pageNO" value="${page.pageNo}" ></td> 
		             <td><input type="hidden" name="prevpageNO" value="${page.pageNo-1}"></td>
		             <td><input type="hidden" name="nextpageNO" value="${page.pageNo+1}"></td>
		             <td><input type="hidden" name="sumPage" value="${page.sumPage}" ></td>
	           </tr>
         </s:if>
          
        </table>       
      </td>
    </tr>

页面效果

2.在需要添加分页的页面来引入PageUI.jsp页面

3.准备pageBean.java,pageInfo.java来处理分页

pageBean.java用来存储分页所需的属性，有以下属性

                                        private int pageNo;//页面编号
private boolean firstPage;//第一页
      private boolean lastPage;//最后一页
      private int sumPage;//总页数
                                        private int pageSize ;//每页显示的记录数
                                        private int totalResult ;//总记录数

pageInfo.java用来处理一些页面属性，比如，设置当前页等等

package com.itheima.elec.util;


/**
 * @author Administrator
 *
 * TODO To change the template for this generated type comment go to
 * Window - Preferences - Java - Code Style - Code Templates
 */
import javax.servlet.http.HttpServletRequest;

public class PageInfo {
    //HTTP请求
    private HttpServletRequest req;
    //每页的记录数
    private int pageSize = 10;
    //当前页
    private int currentPageNo = 1;
    //开始记录数
    private int beginResult = 0;
    //总记录数
    private int totalResult = 0;
    //总页数
    private int totalPage = 0;
    
    private PageBean page=null;

    //日志
   // protected  static final Logger log = Logger.getLogger("testLogger");

    /**
     * 初始化
     * @param req HttpServletRequest HTTP请求
     */
    public PageInfo(HttpServletRequest req) {
       this.currentPageNo = req.getParameter("pageNO")!=null && !req.getParameter("pageNO").equals("")?new Integer(req.getParameter("pageNO")).intValue():1;
       this.pageSize = 10;
       if(this.pageSize<=0){
    	   
    	   this.pageSize=10;
    	   
       }
       this.req = req;      
    }
    
    public PageInfo(){
    	this.currentPageNo=1;
    	this.pageSize=10;
    	
    }
    public PageInfo(int currentPageNo){
    	
    	this.currentPageNo=currentPageNo;
    	this.pageSize=10;
    	
    }
    /**
     * 计算总页数
     */
    private void countPages() {
        if(totalResult==0) {
            this.totalPage=1;
        }
        else {
            this.totalPage = (totalResult / pageSize); //总共几页
            if ((totalResult % pageSize) != 0) this.totalPage = this.totalPage + 1;
        }
    }

    public boolean isFirstPage(){
    	
    	if(this.currentPageNo<=1){
    		
    		return true;
    	}else
    	{
    		return false;	
    	}	
    }
    
    public boolean isLastPage(){
    	
    	if(this.currentPageNo>=this.totalPage){
    		
    		return true;
    	}else
    	{
    		return false;	
    	}	
    }
    
    /**
     * 获得当前页
     * @return int 当前页
     */
    public int getCurrentPageNo() {
          return currentPageNo;
    }

    /**
     * 获得每页的记录数
     * @return int
     */
    public int getPageSize() {
        return pageSize;
    }

    /**
     * 获得总记录数
     * @return int
     */
    public int getTotalResult() {
        return totalResult;
    }

    /**
     * 设置当前页
     * @param current int 当前页码
     */
    public void setCurrentPageNo(int current) {
        this.currentPageNo  =current;
    }

    /**
     * 设置每页的记录数
     * @param i int 记录数
     */
    public void setPageSize(int i) {
        this.pageSize = i;
    }

    /**
     * 获得开始记录数
     * @return int 开始记录数
     */
    public int getBeginResult() {
      
        
        
        if(totalPage!=1)
        {	if(currentPageNo>=totalPage){
        		 currentPageNo=totalPage;
        		 beginResult= (currentPageNo - 1) * pageSize;
                 pageSize=totalResult-beginResult;
            }else{
            	
            	beginResult = (currentPageNo - 1) * pageSize;
        	}
        }
        if(totalPage==1)
        {
        	currentPageNo=totalPage;
        	
        	beginResult=0;
        	pageSize=totalResult;
        	
        }
        setRequestValue();   
        return beginResult;
    }

    /**
     * @param i
     */
    public void setBeginResult(int i) {
        this.beginResult = i;
    }

    /**
     * 获得总页数
     * @return int 总页数
     */
    public int getTotalPage() {
        
    	//log.info("run here totalPage:"+totalPage);
        return totalPage;
        
    }

    /**
     * @param totalResult
     *            The totalResult to set. 设置该分页信息总共有多少条记录
     */
    public void setTotalResult(int totalResult) {
        this.totalResult = totalResult;
        countPages();
    }

    /**
     * 设置序号
     */
    private void setRequestValue(){    	
    	page=new PageBean();
    	page.setFirstPage(isFirstPage());
    	page.setLastPage(isLastPage()); 		
        page.setPageNo(currentPageNo);	
    	page.setPageSize(pageSize);
    	page.setSumPage(totalPage);
    	page.setTotalResult(totalResult);

    }
    public PageBean getPageBean(){
    	
    		return page;
    	
    }
    public void setTotalPage(int totalPage){
    	
    	this.totalPage=totalPage;
    }
  
}

4.提供分页查询的方法

比如： findCollectionByConditionWithPageBySql(condition, params, orderby,pageInfo);这是一个带条件的支持分页的查询方法

在需要分页的service方法中调用该方法如下图：

在findCollectionByConditionWithPageBySql(condition, params, orderby,pageInfo)中通过pageInfo来pageBean，然后返回pageBean

设置到request中

在dao中实现findCollectionByConditionWithPageBySql方法如下

	public List<ElecUser> findCollectionByConditionWithPageBySql(
			String condition, final Object[] params, Map<String, String> orderby,final PageInfo pageInfo) {
		//创建并初始化hql语句
		String sql = "SELECT o.userID,o.logonName,o.userName,a.ddlName,o.contactTel,o.onDutyDate,b.ddlName FROM elec_user o "
				+"INNER JOIN elec_systemddl a ON o.sexID=a.ddlCode AND a.keyword='性别' "
				+"INNER JOIN elec_systemddl b ON o.postID=b.ddlCode AND b.keyword='职位' "
				+"where 1=1";
		//System.out.println(entityClass.getSimpleName());
		//处理orderby对象，转换成hql语句
		String orderbys = this.orderByToSql(orderby);
		//System.out.println(orderbys);
		//组合查询语句
		final String finalSql = sql+condition+orderbys;
		// System.out.println(finalHql);
		
		//查询执行，sql语句的方式
		//方案一，使用HibernateDaoSupport内置的方法
		// List<T> list= this.getHibernateTemplate().find(finalHql, params);
		
		//方案二，使用session的执行hql语句的方法
		
//		       Session session = //
//		    		    this.getSessionFactory()//
//		    		     .getCurrentSession();
//		       
//		       Query query =  session.createQuery(finalHql);
//		       
//		       if(params!=null&¶ms.length>0){
//		    	   
//		    	   for(int i=0;i<params.length;i++){
//		    		   
//		    		     query.setParameter(i,params[i]);
//		    	   }
//		       }
//		        
//		        List<T> lists = query.list();
		//方案三 ,使用接口回掉的方式，取得上下文的session对象，使用session查询hql语句的方式来处理
		
		
		List<Object[]> list =  this.getHibernateTemplate().executeFind(new HibernateCallback() {
			
			@Override
			public Object doInHibernate(Session session) throws HibernateException,
			SQLException {
				
				//这里为了避免列的重复，使用标量查询可以强制限制列的属性，避免重复
				Query query = session.createSQLQuery(finalSql)
						.addScalar("o.userID")
						.addScalar("o.logonName")
						.addScalar("o.userName")
						.addScalar("a.ddlName")
						.addScalar("o.contactTel")
						.addScalar("o.onDutyDate")
						.addScalar("b.ddlName");
				if(params!=null&¶ms.length>0){
					for(int i=0;i<params.length;i++){
						query.setParameter(i, params[i]);
					}
				}
				//query.setCacheable(true);
				   /*2017-7-19号，添加分页代码*/
				     pageInfo.setTotalResult(query.list().size());//设置最大的记录数
				     query.setFirstResult(pageInfo.getBeginResult());//设置查询的记录开始的地方
				     query.setMaxResults(pageInfo.getTotalResult());//设置查询的最大记录数字
				/*2017-7-19号，添加分页代码*/
				return  query.list();
			}
		});
		
		List<ElecUser> userList = new ArrayList<ElecUser>();
		if(list!=null&&list.size()>0){
			for(Object[] obs : list){
				ElecUser elecUser = new ElecUser();
				elecUser.setUserID(obs[0].toString());
				elecUser.setLogonName(obs[1].toString());
				elecUser.setUserName(obs[2].toString());
				elecUser.setSexID(obs[3].toString());
				elecUser.setContactTel(obs[4].toString());
				elecUser.setOnDutyDate((Date)obs[5]);
				elecUser.setPostID(obs[6].toString());
				userList.add(elecUser);
			}
		}
		return userList;
	}

private String orderByToSql(Map<String, String> orderby) {
        
        StringBuffer stringBuffer = new StringBuffer("");
        if(orderby!=null&&orderby.size()>0){
         stringBuffer.append(" ORDER BY ");
        for(Map.Entry<String, String> entry : orderby.entrySet()){
            stringBuffer.append(entry.getKey()+" "+entry.getValue()+",");  
        }
        
        //去除最后一个逗号
        
         stringBuffer.deleteCharAt(stringBuffer.length()-1);
        }
        return stringBuffer.toString();
    }
}

注意里面添加分页的代码

5.在Action中添加识别是否分页的标识如下

在分页的页面提供pagNO和initpage属性，如下图

注意这里的分页采用的时Ajax异步访问的方式来处理的，即，每次点击下一页时，只会改变刷新显示信息的页面，而不会，刷新整个页面

6.使用Ajax技术来分页，下面时js代码

function  gotopage(path,where){
       var page=document.Form2.pageNO;
       var page2=document.Form1.pageNO;
       
       if(where=="next"){ 
     
          page.value=document.Form2.nextpageNO.value;
      
       }else if(where=="prev"){
     
          page.value=document.Form2.prevpageNO.value;
       }else if(where=="end"){
     
          page.value=document.Form2.sumPage.value;
       }else if(where=="start"){
          page.value=1;
       }else if(where=="go"){
         var theForm = document.Form2;   
         if(Trim(theForm.goPage.value)=="")
	     {
		     alert("请输入页数"); 
		     theForm.goPage.focus();   
		     return false;
	     }
	     if(!checkNumber(theForm.goPage))
	     {
		     alert("请输入正确页数(数字)"); 
		     theForm.goPage.focus();     
		     return false;
	     }
	     
	     var objgo=parseInt(theForm.goPage.value);
	     var objsum=parseInt(theForm.sumPage.value);
	     if(objgo<=0||objgo>objsum){
	         alert("不存在此页，请重新输入页数"); 
		     theForm.goPage.focus();     
		     return false; 
	     }
         
         page.value=theForm.goPage.value;                
      } 
     
        //alert(document.Form1.pageNO.value);
        //alert(document.Form2.pageNO.value);
       document.Form1.pageNO.value=document.Form2.pageNO.value;
      Pub.submitActionWithForm('Form2',path,'Form1');       
  }
  
  function gotoquery(path){
      document.Form1.pageNO.value=1;
      Pub.submitActionWithForm('Form2',path,'Form1'); 
  }

这里判断填写信息是否正确，使用submitActionWithForm方法来实现ajax访问

Pub.submitActionWithForm=function(domId,action,sForm){
  /**第一步：创建Ajax引擎对象*/
  var req = Pub.newXMLHttpRequest();
  /**第二步：req.onreadystatechange表示事件处理函数（相当于一个监听），用来监听客户端与服务器端的连接状态*/
  var handlerFunction = Pub.getReadyStateHandler(req, domId,Pub.handleResponse);
  req.onreadystatechange = handlerFunction;
  /**第三步：打开一个连接，要求：如果是POST请求，需要添加一个头部信息，否则此时不能使用send向服务器发送数据*/
  req.open("POST", action, true);
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
  /**第四步：向服务器发送数据，格式：name=张三&age=28*/
  var str = Pub.getParams2Str(sForm); 
  //传递表单Form1中的元素作为参数给服务器
  req.send(str);
}

Pub.getParams2Str=function getParams2Str(sForm){

 var strDiv="";
      
 try {
    var objForm=document.forms[sForm];
  if (!objForm)
    return strDiv;
  var elt,sName,sValue;
  for (var fld = 0; fld < objForm.elements.length; fld++) {
      elt = objForm.elements[fld];    
      sName=elt.name;
      sValue=""+elt.value;
      if(fld==objForm.elements.length-1)
          strDiv=strDiv + sName+"="+sValue+"";
       else   
          strDiv=strDiv + sName+"="+sValue+"&";
   }


  }
  catch (ex) {
    return strDiv;
	}
 
   return strDiv;
}
Pub.newXMLHttpRequest=function newXMLHttpRequest() {
  var xmlreq = false;
  if (window.XMLHttpRequest) {
    xmlreq = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
     
    try {
      
      xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e1) {
       
      try {
      
        xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {
          
        alert(e2);
      }
    }
  }
  return xmlreq;
}
Pub.getReadyStateHandler =function getReadyStateHandler(req, eleid,responseXmlHandler) {
  
  return function () {
    /**
     * req.readyState:用来监听客户端与服务器端的连接状态
     * 0：表示此时客户端没有调用open()方法
     * 1：表示客户端执行open方法，但是send方法没有执行
     * 2：open方法执行，send方法也执行
     * 3：服务器开始处理数据，并返回数据
     * 4：返回数据成功，只有4这个状态，才能获取服务器端返回的结果
     */
    if (req.readyState == 4) {
       /**
        * req.status：表示java的状态码
        * 404：路径错误
        * 500：服务器异常
        * 200：表示没有异常，正常访问数据，只有200这个状态的时候，才能获取服务器端返回的结果
        */
      if (req.status == 200) {
          /**
           * req.responseText:获取服务器端返回的结果，返回的是文本的结果（字符串，json数据）
           * req.responseXML:获取服务器端返回的结果，返回的是XML数据的结果
           */
        responseXmlHandler(req.responseText,eleid);
 
      } else {
        
        alert("HTTP error: "+req.status);
        return false;
      }
    }
  }
}