jsp實現翻頁功能
要實現翻頁功能，只需要設置一個pageIndex即可，然后每次加載頁面時通過pageIndex去加載數據就行。
那么我們可以設置一個隱藏的input框，用於傳遞pageIndex給下個頁面。
當我們點擊上一頁的時候，通過js方法改變pageIndex的值，再提交表單即可
二話不多說，看代碼，代碼里面寫的還算比較清楚。
這個是index.jsp的代碼。
index.jsp
1 <%@page import="Bean.DBBean"%> 2 <%@page import="Entity.Record"%> 3 <%@page import="java.util.List"%> 4 <%@ page language="java" contentType="text/html; charset=UTF-8" 5 pageEncoding="UTF-8"%> 6 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 7 <html> 8 <head> 9 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 10 <title>NoteBook of Eric Wu</title> 11 <link rel="stylesheet" href="css/basic.css"> 12 <link rel="stylesheet" href="css/index.css"> 13 </head> 14 <body> 15 <% 16 int allRecord=0;//總的記錄條數,不包含查詢后的 17 int totalRecord=0;//總的記錄條數,包含查詢后的 18 int totalPage=1;//總的頁面數，包含查詢后的 19 int pageIndex=1;//當前頁面號，用於控制頁面翻轉，默認為1 20 List<Record> records=null; 21 DBBean db=new DBBean(); 22 allRecord=db.getRecordCount(); 23 totalRecord=db.getRecordCount(); 24 totalPage=(totalRecord-1)/10+1; 25 if(request.getParameter("pageIndex")!=null){//不是第一次加載 26 //要做下數據類型轉換 27 pageIndex=Integer.valueOf(request.getParameter("pageIndex")); 28 if(request.getParameter("keyword")!=null){ 29 String keyword=request.getParameter("keyword"); 30 records=db.getRecords(pageIndex,keyword);//獲取查詢內容一頁的事件記錄集,共10條 31 totalRecord=db.getRecordCount(keyword); 32 totalPage=(totalRecord-1)/10+1; 33 }else{ 34 records=db.getRecords(pageIndex);//獲取一頁的事件記錄集,共10條 35 } 36 }else{//第一次加載 37 records=db.getRecords(pageIndex);//獲取一頁的事件記錄集,共10條 38 } 39 session.setAttribute("records", records);//便於后面使用 40 %> 41 <div id="home"> 42 <div id="header"> 43 <div id="WebTitle"> 44 <div class="maintitle"><a href="index.jsp" target="_blank">NoteBook of Eric Wu</a></div> 45 <div class="subtitle">The palest ink is better than the best memory !</div> 46 </div> 47 48 <div id="navigator"> 49 <ul id="navList"> 50 <li><a href="index.jsp">首頁</a></li> 51 <li><a href="add.jsp">新增</a></li> 52 <li><a href="change.jsp">修改</a></li> 53 <li><a href="delete.jsp">刪除</a></li> 54 </ul> 55 <div id="Stats"> 56 記錄-<%=allRecord %> 57 </div><!--end: Stats 狀態--> 58 </div><!-- end: navigator 導航欄 --> 59 </div><!-- end: header 頭部 --> 60 61 <div id="main"> 62 <div id="content"> 63 <form id="searchForm" name="searchForm" action="index.jsp" method="get"> 64 <input type="hidden" name="pageIndex" id="pageIndex" value="1"> 65 <div id="search"> 66 <div class="center"></div> 67 <input type="text" class="search" id="keyword" name="keyword" placeholder="請輸入要查詢的記錄"> 68 <img src="img/search.png" onclick="searchKeyword();" class="button"> 69 </div> 70 </form> 71 <table> 72 <tr> 73 <th width="10%">序號</th> 74 <th width="60%">標題</th> 75 <th width="30%">時間</th> 76 </tr> 77 <% 78 int count=0; 79 if(records!=null){ 80 for(Record r: records){ 81 count++; 82 %> 83 <tr> 84 <td class="center"><%= count %></td> 85 <td><a href="content.jsp?recordId=<%= r.getId() %>" target="_blank"><%= r.getTitle() %></a></td> 86 <td class="center"><%= r.getTime() %></td> 87 </tr> 88 <% 89 } 90 } 91 %> 92 <tr class="alt" > 93 <td class="center" colspan="3"> 94 共<%= totalRecord %>條記錄 95 共<%= totalPage %>頁 96 每頁10條 97 當前第<%= pageIndex %>頁 98 <a href="javascript:void(0);" class="turnPage" onclick="turnTopPage()">上一頁</a> 99 <a href="javascript:void(0);" class="turnPage" onclick="turnBottomPage()">下一頁</a> 100 </td> 101 </tr> 102 </table> 103 </div><!-- end: content 內容 --> 104 </div><!-- end: main 主要部分 --> 105 106 <div id="footer"> 107 Copyright ©2017 汕大-吳廣林 108 </div><!-- end: footer底部--> 109 </div><!-- end: home 自定義的最大容器 --> 110 </body> 111 112 <script type="text/javascript"> 113 var pageIndex=<%=pageIndex %>; 114 var totalPage=<%=totalPage %>; 115 console.log(pageIndex); 116 //上一頁 117 function turnTopPage(){ 118 if(pageIndex==1){ 119 return; 120 }else{ 121 document.getElementById("pageIndex").value=pageIndex-1; 122 document.getElementById("searchForm").submit(); 123 } 124 } 125 //下一頁 126 function turnBottomPage(){ 127 if(pageIndex>=totalPage){ 128 return; 129 }else{ 130 document.getElementById("pageIndex").value=pageIndex+1; 131 document.getElementById("searchForm").submit(); 132 } 133 } 134 function searchKeyword(){ 135 document.getElementById("pageIndex").value=1; 136 document.getElementById("searchForm").submit(); 137 } 138 </script> 139 </html>
效果圖
翻頁后：pageIndex=1
翻頁后：pageIndex=2
參考：
jsp實現上一頁下一頁翻頁功能 - 汕大小吳 - 博客園
https://www.cnblogs.com/wuguanglin/p/fanye.html