總結之java web實現分頁功能(一)
阿新 • • 發佈:2019-01-02
網頁開發離不開分頁,分頁如何實現呢
-
可以看一下百度的分頁有什麼功能
-
上一頁、下一頁、10頁按鈕、一頁顯示10條資訊
定義一個 PageResult類專門返回分頁所需資訊##
public class PageResult { //滿足條件的總記錄數 private int count; //當前頁數 private int pageNo; //每頁顯示的條數 private int pageSize; //總頁數 private int pageCount; //內容 private uLt reslts; //get和set方法省了
}
看看資料庫提供了什麼分頁功能
SELECT * FROM user ORDER BY userId ASC limit 1,10
這表示從第一個開始,一共有十個。看見資料庫提供的功能,可以更清楚的寫頁面分頁
寫一個分頁的方法傳入第幾頁,和一頁顯示多少條,
可以根據第幾頁和每頁條數知道開始的第幾條(PageNo-1)*pageSize
public List<User> getUserListPage(int PageNo, int pageSize) { List<User> users =new ArrayList<User>(); Connection conn = null; PreparedStatement ps = null; ResultSet rs = null; try { conn = DBConnectionUtil.CreateConnection(); String sql = "SELECT * FROM user ORDER BY userId ASC limit ?,?"; ps = conn.prepareStatement(sql); ps.setInt(1,(PageNo-1)*pageSize); ps.setInt(2,pageSize); rs = ps.executeQuery(); while (rs.next()) { User user = new User(); user.setUserId(rs.getInt("userid")); user.setUsername(rs.getString("username")); user.setPassword(rs.getString("password")); users.add(user); } } catch (SQLException e) { e.printStackTrace(); } finally { DBConnectionUtil.closeAll(rs, ps, conn); } return users; }
- 後臺的分頁就實現了,可以寫個測試類呼叫分頁方法看看是否存在錯誤 無誤後,開始向頁面傳值了。
- 寫個分頁資訊顯示的Servlet的 我們寫了個PageResult現在可以用起來了
- 一開始載入頁面是肯定沒有傳值所有預設開始為1,每頁10條 把值都賦給PageResult
- 注意總頁數是總條數除以每頁數,有餘數進一
@WebServlet(name = "UsersServlet",urlPatterns = {"/userPage"}) public class UsersServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { int pageNo =1; int pageSize =10; String pageNoStr =request.getParameter("pageNO"); String pageSizeStr =request.getParameter("pageSize"); if(pageNoStr!=null){ pageNo=Integer.valueOf(pageNoStr); } if(pageSizeStr!=null){ pageSize=Integer.parseInt(pageSizeStr); } UserService userService =new UserServiceImpl(); List<User> users =userService.getUserListPage(pageNo,pageSize); int count =userService.getUsersCount(); PageResult pageResult =new PageResult(); pageResult.setPageNo(pageNo); pageResult.setPageSize(pageSize); pageResult.setResults(users); pageResult.setCount(count); if (count%pageSize!=0){ pageResult.setPageCount(count/pageSize); }else { pageResult.setPageCount(count/pageSize+1); } response.setCharacterEncoding("UTF-8"); System.out.println(pageResult); request.setAttribute("pageResult",pageResult); try { request.getRequestDispatcher("/users.jsp").forward(request,response); } catch (ServletException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } }
資料都傳輸到頁面了,現在需要頁面處理資料
-
對PageResult中。Results遍歷得到頁面資訊 Index.index 只能顯示頁面條數序號,全部資訊的序號要加上前面的總條數
${(pageResult.pageNo-1)*pageResult.pageSize+index.index}###下面的分頁操作需要一些邏輯,和程式碼拼接 ###
如果頁數很多會顯示不全,所有我們只取10個頁碼
頁碼的內容是變化的
上一頁和下一頁就比較簡單的可以實現了引數上加一,減一 -
開始頁數int start =pageNO-5<= 0?1:pageNO-5;
-
結束頁數 int end= start+10大於pageCount? start+10: pageCount;
<table>
<tr>
<td>序號</td>
<td>username</td>
<td>password</td>
</tr>
<c:forEach var="user" items="${pageResult.results}" varStatus="index">
<tr>
<td>${(pageResult.pageNo-1)*pageResult.pageSize+index.index}</td>
<td>${user.username}</td>
<td>${user.password}</td>
</tr>
</c:forEach>
</table>
<%
PageResult pageResult = (PageResult) request.getAttribute("pageResult");
int pageNO =pageResult.getPageNo();
int pageCount =pageResult.getPageCount();
int start =pageNO-5<= 0?1:pageNO-5;
int end= start+10<pageCount? start+10: pageCount;
if(pageNO >1){
%>
<a href="userPage?pageNO=1">首頁</a>
<a href="userPage?pageNO=<%=pageNO-1%>">上一頁</a>
<%
}
for(int i=start;i<end;i++){
%>
<a style="color:<%=(i==pageNO?"red":"")%>" href="userPage?pageNO=<%=i%>">第<%=i%>頁</a>
<%
}
if(pageNO<pageCount){
%>
<a href="userPage?pageNO=<%=pageNO+1%>">上一頁</a>
<a href="userPage?pageNO=<%=pageCount%>">首頁</a>
<%
}
%>
<form action="userPage">
第<input type="text"name="pageNO" value="${pageResult.pageNo}">頁
<input type="submit" value="確定">
</form>
一共有<span>${pageResult.count}</span>
###歸根結底分頁功能的實現邏輯上很簡單,後端把分頁資訊封裝在一個物件中,把物件給前端,前端處理資訊顯示並個分頁按鈕herf賦上url+頁碼引數 點選再次請求伺服器就可以了 ###