分頁的實現

TZQ_DO_Dreamer發表於2014-10-03

想要實現如下分頁效果：


分頁實現邏輯：



關鍵程式碼如下：

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;
      }
}


相關文章