Java web 實作分頁功能

jsp分頁功能如何實作

後端

整體邏輯是：前端發送來的請求（包含需求頁面數和每頁數量），由servlet捕獲後調用相關的service層，service選擇性做出更改繼而調用dao層和資料庫進行互動。

1.建立pageBean泛型類，包括但不限于以下成員變量

private int totalNumber;
private int currentPage;
private int rows;
private int totalPage;
private List<T> lists;  
           

2.service層（已目錄為例），寫出業務邏輯

public interface CategoryService {
    int addCategory(Category category);
    ArrayList<Category> allCategory();
    boolean updateCategory(String oldCname, String newCname);
    boolean deleteCategory(String cname);
    PageBean<Category> pageInfo(int page, int rows);
}  
           

3.dao層，實作資料增删改查

public interface CategoryDao {
    boolean queryCategoryByName(Category category);
    int addCategory(Category category);
    ArrayList<Category> allCategory();
    boolean deleteCategory(String cname);
    boolean updateCategory(String oldCname,String newCname);
    PageBean<Category> pageInfo(int page, int rows);
}  
           

4.sql查詢語句（mysql）

public ArrayList<Category> partCategory(int page, int rows) {
    // 分頁查詢語句
    String sql = "select * from category limit " + page*rows + "," + rows;
    List<Map<String, Object>> maps = template.queryForList(sql);
    ArrayList<Category> categories = new ArrayList<>();
    for (Map<String, Object> map : maps) {
        Category category = new Category();
        try {
            // 封裝對象
            BeanUtils.populate(category, map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        categories.add(category);
    }
    return categories;
}
           

5.将前端需要的資料結果，和總頁數（總條數除以每頁條數rows）、總條數（使用count（*）查詢）封裝進pageBean，設定session屬性，将頁面轉發回前端

前端

可顯示所有頁碼，也可僅顯示前一頁或後一頁，此處使用後者。若要使用前者可使用如下進行周遊列印所有頁碼，然後設定function（page）響應每個頁碼的onclick。

<c:forEach begin="1" end="${pageBeans.totalPage}" step="1">

1.展示總頁碼，目前頁碼，總條數(使用EL表達式從pageBeans中擷取資料)

共有 p a g e B e a n s . t o t a l N u m b e r &lt; / s t r o n g &gt; 條 記 錄 ， 當 前 第 &lt; s t r o n g &gt; {pageBeans.totalNumber}&lt;/strong&gt; 條記錄，目前第&lt;strong&gt; pageBeans.totalNumber</strong>條記錄，目前第<strong>{pageBeans.currentPage} 頁，共 ${pageBeans.totalPage} 頁

2.設定首頁、尾頁(使用時要放在标簽内)

a href="KaTeX parse error: Expected 'EOF', got '&' at position 72: …findAllCategory&̲page=1&rows=5">…{pageContext.request.contextPath }/CategoryServlet?op=findAllCategory&rows=5&page=${pageBeans.totalPage }">尾頁

3.跳轉頁(設定一個text框輸入資料，然後使用jump函數判斷)

<script type="text/javascript">
	function jump() {
		var numa = document.getElementById("numa").value;
		if (!/^[1-9][0-9]*$/.test(numa)) {
			alter("頁碼不對");
			return;
		}
		if (numa > ${pageBeans.totalPage}) {
			alert("超出範圍了");
			return;
		}
		window.location.href = "${pageContext.request.contextPath }/CategoryServlet?op=findAllCategory&rows=5&page="
				+ numa;
	}
</script>  
           

4.前一頁、後一頁（通過判斷當頁是否為第一頁或最後一頁，來選擇性執行，頁面實際從0開始，所有比較值為0）

<c:if test="${pageBeans.currentPage > 0}">
	<a href="${pageContext.request.contextPath }/CategoryServlet?op=findAllCategory&&rows=5&page=${pageBeans.currentPage}" target="_blank" rel="external nofollow" >上一頁</a>
</c:if>
<c:if test="${pageBeans.currentPage == 0}">
	<a class="disabled" href="#" target="_blank" rel="external nofollow" >上一頁</a>
</c:if>
           

容易出錯的地方

1.servlet接受的請求應帶有page和rows，若沒有這兩個輸入則會輸出空的Arraylist.

2.jsp中使用EL表達式擷取pageBeans的資料時變量名錯誤

3.分頁各部分跳轉路徑中要包含page和rows，且op方法要相同。