分页的实现

想要实现例如以下分页效果:


分页实现逻辑:



关键代码例如以下:

page.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= "UTF-8"%>
<%@taglib uri= "http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<base href= "http://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath }/" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> Insert title here</title >
<style type= "text/css">
     #pageCode{
           width: 30px;
           border: 1px solid black;
     }
     #current{
           border: 1px solid black;
           background-color: #bbffaa ;
     }

</style>
<script type= "text/javascript" src="script/jquery-1.7.2.js" ></script>
<script type= "text/javascript">
     $(function(){
           //onchange在文本框内容发生改变时触发事件
          $( "#pageCode").change(function (){
               var pageCode=$.trim(this.value);
               //假设输入为空
               if(pageCode=="" ){
                    this.value=this .defaultValue;//恢复为默认值
                    return false ;
              }
               //假设输入值不是一个数字
               if(isNaN(pageCode)){
                    this.value=this .defaultValue;//恢复为默认值
                    return false ;
              }
               //通过window.location对象实现页面的跳转
               window.location.href= "DataServlet?method=getPage&pageNo=" +pageCode;
          });  
     });

</script>
</head>
<body>
     <!--显示页面上的数据  -->
     <c:forEach items="${page.list } " var ="data">
           ${data }<br >
     </c:forEach >
     
     
     <!-- 假设有上一页的话就显示下面的超链接 -->
     <c:if test="${page.hasPrev } ">
           <a href="/Page/DataServlet?method=getPage&pageNo=1" >首页 </a>
           <a href="/Page/DataServlet?method=getPage&pageNo= ${page.prevNo }"> 上一页</a >
     </c:if >
     
     <!--当前页码大于3时显示第一页的超链接  -->
     <c:if test="${page.pageNo>3 } ">
           <a href="/Page/DataServlet?method=getPage&pageNo=1" >1 </a>
     </c:if >
     <!--当前页码>4 显示三个点“...”  -->
     <c:if test="${page.pageNo>4 } ">...</c:if >
     
     <!-- 从1開始 到总页数结束 -->
     <c:forEach begin="1" end= "${page.totalPageNum }" var="num" >    
           <c:choose>
               <c:when test= "${num==page.pageNo }"><span id="current" >${num }</ span></c:when >
               <c:when test= "${num>=page.pageNo-2 && num<=page.pageNo+2 }" >${num }&nbsp; </c:when>
           </c:choose>
     </c:forEach >

     <!--当前页码+3小于总页数时   显示三个点“...”  -->
     <c:if test="${page.pageNo+3<page.totalPageNum }">...</c:if >
     <c:if test="${page.pageNo+3<page.totalPageNum} ">
           <a href="/Page/DataServlet?method=getPage&pageNo= ${page.totalPageNum}"> ${page.totalPageNum}</a >
     </c:if >
     <!--假设还有当前页还有下一页则显示下一页和末页-->
     <c:if test="${page.hasNext } ">
           <a href="/Page/DataServlet?method=getPage&pageNo= ${page.nextNo }"> 下一页</a >
           <a href="/Page/DataServlet?method=getPage&pageNo= ${page.totalPageNum}"> 末页</a >
     </c:if >

     共同拥有 ${page.totalItemNum }条记录
     前往第 <input id= "pageCode" type ="text" name="pageCode" value="${page.pageNo } "/>
</body>
</html>






DataServlet.java

public class DataServlet extends BaseServlet {
      private static final long serialVersionUID = 1L ;
     
      private DataService dataService = new DataServiceImpl();
     
      protected void getDataList( HttpServletRequest request, HttpServletResponse response)
               throws ServletException, IOException {
          List <Data> dataList = dataService .getDataList() ;
          WebUtils .forward( request, response , "dataList" , dataList, "/data.jsp" );
      }

     
      protected void getPage( HttpServletRequest request,
              HttpServletResponse response) throws ServletException, IOException {
           //获取页码
          String pageNoStr = request.getParameter( "pageNo");
           //获取Page对象
          Page <Data> page = dataService.getPage (pageNoStr );
           //传到前台去
         //WebUtils.forward(request, response, attrName, attrVal, targetPath);
          WebUtils .forward( request, response , "page" , page, "/page.jsp" );
      }
     
}






BaseServlet .java

public abstract class BaseServlet extends HttpServlet {

      private static final long serialVersionUID = 1L ;
     
      @Override
      protected void doGet( HttpServletRequest request, HttpServletResponse response )
               throws ServletException, IOException {
           doPost( request, response );
      }
     
      @Override
      protected void doPost( HttpServletRequest request, HttpServletResponse response )
               throws ServletException, IOException {
          request .setCharacterEncoding( "UTF-8");
          String methodName = request.getParameter( "method");
           try {
              Method method =
                    this. getClass() .getDeclaredMethod(
                        methodName ,
                        HttpServletRequest .class ,
                        HttpServletResponse .class
                    );
              method .setAccessible( true);
              method .invoke(this, request, response);
           } catch (Exception e ) {
              e .printStackTrace() ;
           }
      }

}






DataServiceImpl.java

public class DataServiceImpl implements DataService {
     
      private DataDao dataDao = new DataDaoImpl ();

      @Override
      public List< Data> getDataList() {
           return dataDao .getDataList() ;
      }

      @Override
      public Page< Data> getPage(String pageNoStr) {
           //1.取得总记录数
           int totalItemNum = dataDao.getTotalItemNum ();
           //2.通过參数pageNoStr和參数totalItemNum来创建page对象
           //内部纠正了pageNo值
          Page <Data> page= new Page<>(pageNoStr, totalItemNum);
           //3.获取list数据。调用page.getPageNo()得到有效值
          List <Data> list = dataDao.getPageList (page .getPageNo(), Page .pageSize) ;
          page .setList(list);
           //4.组装完page对象后将其返回
           return page;
      }

}








DataDaoImpl .java

public class DataDaoImpl extends DaoImpl <Data> implements DataDao {

      @Override
      public List< Data> getDataList() {
          Connection connection = getConnection() ;
          String sql = "select data_id dataId,data_name dataName from datatable";
          List <Data> dataList = this .getBeanList (sql , connection);
           releaseConn(connection );
           return dataList;
      }

      @Override
      public List< Data> getPageList(int pageNo, int pageSize) {
          Connection connection = JDBCUtils.getConnection() ;
          String sql = "SELECT data_id dataId,data_name dataName FROM datatable LIMIT ?

,?";

          List <Data> list = this .getBeanList (sql , connection, (pageNo - 1) *pageSize, pageSize);
          JDBCUtils .releaseConn( connection);
           return list;
      }

      @Override
      public int getTotalItemNum() {
          Connection connection = JDBCUtils.getConnection() ;
          String sql = "SELECT COUNT(*) FROM datatable";
           //运行count函数的SQL语句的Java函数返回的Java类型是Long
           //将Long包装类型转换为long基本数据类型
           long itemNum = this. getSigleValue(sql , connection);
          JDBCUtils .releaseConn( connection);
           //在返回时。将long基本数据类型强转为 int基本数据类型
           return (int) itemNum;
      }

}







DataDaoImpl.java

public class DataDaoImpl extends DaoImpl <Data> implements DataDao {

      @Override
      public List< Data> getDataList() {
          Connection connection = JDBCUtils.getConnection() ;
          String sql = "select data_id dataId,data_name dataName from datatable";
          List <Data> dataList = this .getBeanList (sql , connection);
          JDBCUtils .releaseConn( connection);
           return dataList;
      }

      @Override
      public List< Data> getPageList(int pageNo, int pageSize) {
          Connection connection = JDBCUtils.getConnection() ;
          String sql = "SELECT data_id dataId,data_name dataName FROM datatable LIMIT ?,?";
          List <Data> list = this .getBeanList (sql , connection, (pageNo - 1) *pageSize, pageSize);
          JDBCUtils .releaseConn( connection);
           return list;
      }

      @Override
      public int getTotalItemNum() {
          Connection connection = JDBCUtils.getConnection() ;
          String sql = "SELECT COUNT(*) FROM datatable";
           //运行count函数的SQL语句的Java函数返回的Java类型是Long
           //将Long包装类型转换为long基本数据类型
           long itemNum = this. getSigleValue(sql , connection);
          JDBCUtils .releaseConn( connection);
           //在返回时,将long基本数据类型强转为 int基本数据类型
           return (int) itemNum;
      }
}


posted on 2017-05-29 09:42  ljbguanli  阅读(169)  评论(0编辑  收藏  举报