Java Web分頁顯示實現思路
阿新 • • 發佈：2018-11-30
一.需求描述
從資料庫中將所有資料查詢出來，分頁顯示在前端頁面上，每頁顯示若干條資料，並實現"首頁"，"上一頁"，"下一頁"，"尾頁"，"跳轉至指定頁碼"，"顯示當前頁碼"等功能
二.實現思路
我的思路是將當前頁碼的值作為引數傳給servlet，作為查詢時傳入持久層的引數，查詢出對應頁的五條資料（我的專案中規定一頁顯示五條），然後將查詢出來的物件集合傳給jsp顯示，下面是前端實現程式碼（此處請注意！實體物件的屬性欄位開頭兩個字母不能一個大寫一個小寫，這不符合JavaBean的屬性命名規範，開頭字母必須小寫，例如username，不能寫成UserName,否則在EL表示式中將報異常:javax.el.PropertyNotFoundException:Property 'UserName' not found on，因為我之前不清楚這個規範，所以當時在這個地方卡了很久 ）
<script type="text/javascript"> function remove(node){ var tr1 = node.parentNode.parentNode; var username = tr1.cells[1].innerText; alert(username); var newurl = "DeleteServlet?username="+username; location.href = newurl; } function First(){ location.href = "PageServlet?pageno=1"; } function Last(){ var pageno =<%= (Integer)request.getAttribute("pageno") %> if(pageno<=1){ alert("這已經是最前面一頁！"); return; }else{ pageno = pageno - 1; location.href = "PageServlet?pageno="+pageno; } } function Next(){ var pageno =<%= (Integer)request.getAttribute("pageno") %> var pagenum =<%= (Integer)request.getAttribute("pagenum") %> if(pageno>=pagenum){ alert("沒有下一頁了！"); return; }else{ pageno++; location.href = "PageServlet?pageno="+pageno; } } function End(){ var pagenum =<%= (Integer)request.getAttribute("pagenum") %> location.href = "PageServlet?pageno="+pagenum; } function random(){ var spage=document.getElementById("randompage").value; var pagenum =<%= (Integer)request.getAttribute("pagenum") %> if((spage>=1) && (spage<=pagenum)){ var pageno = spage; location.href = "PageServlet?pageno="+pageno; }else{ alert("超出頁碼範圍！請重新輸入"); } } </script> <body> <table border="1" id="no1"> <tr> <th>序號</th> <th>使用者名稱</th> <th>使用者密碼</th> <th>使用者郵箱</th> <th>使用者性別</th> <th>使用者所在地區</th> <th>使用者密保序列號</th> <th>操作</th> </tr> <c:forEach items="${us}" var="user"> <tr> <td><%= count+=1 %></td> <td>${user.username}</td> <td>${user.password}</td> <td>${user.useremail}</td> <td>${user.sex}</td> <td>${user.country}</td> <td>${user.passwordstring}</td> <td><button onclick="remove(this)">刪除</button></td> </tr> </c:forEach> </table> <table id="no2"> <tr> <td><button onclick="First()">首頁</button></td> <td><button onclick="Last()">上一頁</button></td> <td><button onclick="Next()">下一頁</button></td> <td><button onclick="End()">尾頁</button></td> <label>當前資料庫中共有<%= (Integer)request.getAttribute("pagenum") %>頁</label> <label>跳轉至第</label> <input id="randompage" type="text" />頁 <button onclick="random()">跳轉</button> <label>當前是第<%= (Integer)request.getAttribute("pageno") %>頁</label> </tr> </table> </body>
使用SQL查詢語句 select * from table_name limit n,m;(從指定表中查詢第n條開始的m資料)，將查詢出來的資料放入集合中儲存，以下是dao層的方法實現
//查詢當前頁面的五條記錄 public List<User> queryuserlimit(int pageno) throws ClassNotFoundException, SQLException { Class.forName("com.mysql.jdbc.Driver"); Connection conn = DriverManager.getConnection(url,username,pwd); String sql = "select * from user limit ?,?"; //企業級應用中通常使用preparedstatement而不使用statement PreparedStatement ps = conn.prepareStatement(sql); ResultSet rs = null; //pageno是當前要查詢的頁碼值 ps.setInt(1,(pageno*5)-5); ps.setInt(2,5); rs = ps.executeQuery(); //將查詢返回的結果集中的物件儲存到集合中，方便jsp頁面顯示 List<User> us = new ArrayList(); while(rs.next()){ User user = new User(); user.setUsername(rs.getString("username")); user.setPassword(rs.getString("password")); user.setUseremail(rs.getString("useremail")); user.setSex(rs.getString("sex")); user.setCountry(rs.getString("country")); user.setPasswordstring(rs.getString("passwordstring")); us.add(user); } //關閉資源 rs.close(); ps.close(); conn.close(); return us; }
下面是Servlet的實現程式碼，將pageno作為引數傳入servlet執行控制層的任務
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//獲取頁面傳來的pageno頁碼值
String pageno1 = request.getParameter("pageno");
int pageno = Integer.parseInt(pageno1);
System.out.println("JSP中傳來的引數pageno="+pageno);
UserdaoImpl ul = new UserdaoImpl();
List<User> us = new ArrayList();
try {
us = ul.queryuserlimit(pageno);
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
try {
//查詢資料庫裡所有資訊 以獲得pagenum(總頁數)和usernum(總記錄條數)
ul.queryAll();
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//獲取總頁數的值
int pagenum = ul.getPagenum();
System.out.println("當前有"+pagenum+"頁資料");
//獲取總記錄條數的值
int usernum = ul.getUsernum();
System.out.println("當前有"+usernum+"條記錄");
for(User i : us){
System.out.println(i.toString());
}
request.setAttribute("pageno", pageno);
request.setAttribute("pagenum", pagenum);
//傳遞usernum的值
request.setAttribute("usernum", usernum);
//傳遞儲存User物件的集合us
request.setAttribute("us", us);
request.getRequestDispatcher("RootManage.jsp").forward(request, response);
}這個地方我們必須要獲取當前資料庫中的資料如果以五條一頁顯示時的總頁碼數以及資料庫中的總記錄條數，這個地方我處理的有點愚，資料庫中的總記錄數可以用select count(*) from table_name這條SQL語句來查詢，而我是查詢了所有資料儲存在集合中，再獲取它的size()，這個辦法有點愚。
我們在進入到顯示前端的JSP時，應該給一些關鍵引數初始化，例如pageno（當前頁碼數）和pagenum（當前總頁碼數），如果不給pageno初始化值的話，會報空指標異常！這個地方很關鍵，下面是我JSP中的java程式碼
<%
//開啟瀏覽器時給pageno初始化，不然會報空指標異常
UserdaoImpl ul = new UserdaoImpl();
if(request.getAttribute("pageno") == null){
request.setAttribute("pageno",1);
}
//給每條資料編序號
int count = 5*(Integer)request.getAttribute("pageno")-5;
if(request.getAttribute("us") == null){
List<User> al = ul.queryuserlimit(1);
request.setAttribute("us",al);
int pagenum = ul.getPagenum();
request.setAttribute("pagenum",pagenum);
}
%>每次點選觸發js事件來改變pageno的值，然後傳給servlet，servlet呼叫持久層的方法來查詢資料並轉發到JSP，JSP再獲取相應值發生改變。這就是我實現簡單分頁顯示的思路。
三.文末總結
因為最近在學習java web22，所以一直在寫相關的功能實現，今天寫完這個分頁顯示的功能，突然想要在CSDN上寫一篇技術類部落格，一方面是因為自己一直在CSDN上免費獲取各位大牛的知識，所以想為CSDN貢獻點東西來回饋社群，真的很希望這篇部落格能幫助到其他有需要的同學。另一方面是為了把自己這個階段的所學所想記錄下來，方便日後回看對比。
最後還是那句老話：不積跬步，無以至千里。不積小流，無以成江海。勉勵自己，也勉勵看到此文章的朋友。