一.需求描述
從數據庫中將所有數據查詢出來，分頁顯示在前端頁面上，每頁顯示若干條數據，並實現"首頁"，"上一頁"，"下一頁"，"尾頁"，"跳轉至指定頁碼"，"顯示當前頁碼"等功能
二.實現思路
我的思路是將當前頁碼的值作爲參數傳給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貢獻點東西來回饋社區，真的很希望這篇博客能幫助到其他有需要的同學。另一方面是爲了把自己這個階段的所學所想記錄下來，方便日後回看對比。
最後還是那句老話：不積跬步，無以至千里。不積小流，無以成江海。勉勵自己，也勉勵看到此文章的朋友。