網頁中實現分頁功能的幾種方法
當我們在做一些類似於貼吧展示帖子這種專案的時候，由於帖子的數量比較多，就會用到分頁的技術。這裡我將介紹幾種幾種方式來實現分頁的技術。
首先我們先來了解一下分頁功能的核心技術點：
1. 首先先規定每一頁顯示多少張貼子數，這樣才能計算總共有多少頁。
2. 然後再從資料庫中提取相關數量的記錄，將這些提取出來的記錄顯示在頁面上。
a. 從資料庫中提取有限的記錄時，我們用到的sql語句如下：
//在資料庫中查詢從指定位置開始，指定數量的根貼子。
"select * from article wherepid = 0 limit " +start + "," + pageSize);
b. 未知引數解釋：
Pid: 帖子的父帖子（pid = 0的意思為：查詢的是根貼子）
start: 在資料庫中，從哪一條記錄開始讀取，從0開始。
pageSize:每一頁帖子包含的帖子數，自定義
c. 根據資料庫的查詢語句，我們需要計算出start的值。
d. 計算start的值，我們需要知道當前是第幾頁，然後根據公式：
//計算在資料庫中執行查詢語句時的初始位置
int start = (pageNum - 1) * pageSize;
e. 根據上面的分析，可以得出分頁的關鍵就是傳遞引數pageNum（當前是第幾頁），則就可以利用同一個頁面，顯示不同的帖子。則不同的方法也就可以理解為：不同的方式傳遞引數（pageNum）。
f. 當然，我們也應該在頁面中接收傳遞過來的引數,程式碼如下:
String pageNumStr = request.getParameter("pageNum"); //獲取當前是第幾頁 int pageNum = 1; //初始頁面是第1頁 //如果是第一次進入當前頁面，則不更新pageNum的值 //否則更新為傳送過來的值 if(pageNumStr != null && !pageNumStr.equals("")){ pageNum = Integer.parseInt(pageNumStr.trim()); } |
方法一： 利用上下頁
1. 效果如圖所示：
2． 值得注意的地方：
考慮到程式的健壯型，當已經到達第一頁的時候，不應該繼續點選上一頁啦，這就需要我們處理一下相關語句，加一個if語句判斷，一旦pageNum的值小於等於1,就設定paeNum的值為1。
3. 詳細程式碼如下：
<!-- 方法一：利用上下頁實現分頁功能 --> <% //將跳轉語句抽取出來 String str1 = ""; if(pageNum > 1){ str1 = "'ShowArticleFlat.jsp?pageNum=" + (pageNum-1) + "'"; }else{//當前頁為第一頁的時候，已經沒有上一頁啦,所以不用進行跳轉 str1 =""; } //這是跳轉到下一頁的連結地址 String str2 = "'ShowArticleFlat.jsp?pageNum=" + (pageNum+1) + "'"; %> <!--也可這樣寫： <a href= "ShowArticleFlat.jsp?pageNum=<%= pageNum+1%>">下一頁</a> --> <a href= <%= str1 %>>上一頁</a> <a href= <%= str2 %>>下一頁</a> |
方法二： 利用下拉條的方式展示
1. 效果展示圖如下：
2. 值得注意的地方：
1.對下拉條的選項有控制的是select標籤中的onchange，當用戶點選某一個選項時，我們需要讓表單自己提交，程式碼如下：
onchange = "document.form1.submit()">
form1：指的是form的名字，用form的name屬性指定即可
同時select的name屬性也應該是傳遞的引數: pageNum,option標籤的value值為每一頁的頁碼.
2. 如果，想要下拉條中的框中顯示是當前頁數，而不是預設的第一頁，則需要在optio標籤中加上一下引數：
<%= (pageNum == i) ? "selected" : ""%> 解釋：如果當前的頁碼跟i值相同，則就為selected狀態，否則就為空串 效果圖如下：(以當前頁為第4頁為例)
|
3. 詳細的程式碼如下：
<!-- 方法二：利用下拉條實現分頁功能 --> <form name = "form1" action = "ShowArticleFlat.jsp"> <select name = "pageNum" onchange = "document.form1.submit()"> <% for(int i=1; i <= totalPages; i++){ %> <option value = <%= i %> <%= (pageNum == i) ? "selected" : ""%>>第<%= i %>頁</option> <% } %> </select> </form> |
方法三： 利用輸入框的方式展示
1. 效果圖如下：
在輸入框輸入頁碼數，點選go就會跳轉到相應的頁上。（同樣也是利用表單提交）
2.值得注意的地方：
Input標籤中,name屬性的屬性值一定為:pageNum
若想要輸入框中可以顯示當前頁碼數，需要再加入value屬性，它的屬性值為：
"<%= pageNum %>"
3 . 詳細程式碼如下：
<!-- 方法三：利用輸入框實現分頁功能 --> <form action = "ShowArticleFlat.jsp"> <input type = "text" size = 4 name = "pageNum" value = "<%= pageNum %>"/> <input type = "submit" size = 4 value = "go"/> </form> |