前端實現用ligerUI實現分頁，感覺用框架確實簡單，閒著無聊，模擬著liger的分頁界面實現了一遍（只要是功能，樣式什麼無視）
這裡用基礎的三層架構+servlet+jsp實現，思路很簡單，把所有分頁相關信息寫入到一個pagebean類裡面，service返回這個bean類，每次分頁查詢時都從該bean裡查找信息。只是其中的細節問題比較繁瑣，如邊界處理（前端和後台邊界都要處理），下拉框跳轉後要顯示當前頁等等
這是ligerUI實現的分頁樣式（實現過程我的上一篇博客有寫：//www.VeVB.COm/article/92850.htm）
模擬實現過程：
目錄結構
數據庫（mysql）
model層,一個數據庫對應的model（Blog），還有一個pageBean(BlogPage)
import java.sql.Date;public class Blog { private int id; private int category_id; private String title; private String content; private Date created_time; //getter和setter方法@Override public String toString() { return "Blog [id=" + id + ", category_id=" + category_id + ",, content=" + content + ", created_time=" + created_time + "]"; } } public class BlogPage { private List<Blog> pagerecord;//每頁記錄private int pageno;//當前頁private int pagenostart;//每頁開始索引private int pagesize=5;//每頁多少數據private int totalrecord;//總記錄數private int totalpage;//總頁數public BlogPage(int pageno,int totalrecord){ //pageno totalrecord都可以當做已有信息this.totalrecord=totalrecord; //計算總頁數totalpage=(totalrecord%pagesize==0)?totalrecord/pagesize:totalrecord/pagesize+1; //pageno的邊界處理if(pageno<=1) this.pageno=1; else if(pageno>=totalpage) this.pageno=totalpage; else this.pageno=pageno; //計算每頁開始索引，即每頁第一個數據的索引，用於分頁查詢pagenostart=(this.pageno-1)*pagesize; } public int getPagenostart() { return pagenostart; } public void setPagenostart(int pagenostart) { this.pagenostart = pagenostart; } public List<Blog> getPagerecord() { return pagerecord; } public void setPagerecord(List<Blog> pagerecord) { this.pagerecord = pagerecord; } public int getPageno() { return pageno; } public void setPageno(int pageno) { this.pageno = pageno; } public int getPagesize() { return pagesize; } public void setPagesize(int pagesize) { this.pagesize = pagesize; } public int getTotalrecord() { return totalrecord; } public void setTotalrecord(int totalrecord) { this.totalrecord = totalrecord; } public int getTotalpage() { return totalpage; } public void setTotalpage(int totalpage) { this.totalpage = totalpage; }} dao層
JDBCUtil封裝了jdbc的連接和釋放操作
public class JDBCUtil { private static String url = "jdbc:mysql://localhost:3306/blogs_stu"; private static String username = "root"; private static String password = ""; static { try { Class.forName("com.mysql.jdbc.Driver"); } catch (Exception e) { e.printStackTrace(); } } public static Connection getConnection(){ Connection conn; try { conn= DriverManager.getConnection(url, username, password); return conn; } catch (SQLException e) { e.printStackTrace(); } return null; } public static void release(ResultSet rs,PreparedStatement ps,Connection conn){ if(rs!=null){ try { rs.close(); } catch (SQLException e) { e.printStackTrace(); } } if(ps!=null){ try { ps.close(); } catch (SQLException e) { e.printStackTrace(); } } if(conn!=null){ try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } }} public class BlogDao { //每頁的記錄，傳入每頁開始索引和每頁大小用於分頁，即limit的兩個參數（mysql分頁用limit） public List<Blog> getPageRecord(int pagenostart, int pagesize) { Connection conn = JDBCUtil.getConnection(); PreparedStatement ps = null; ResultSet rs = null; String sql = "select * from blog limit ?,?"; List<Blog> list = new ArrayList<Blog>(); try { ps = conn.prepareStatement(sql); ps.setInt(1, pagenostart); ps.setInt(2, pagesize); rs = ps.executeQuery(); while (rs.next()) { Blog blog = new Blog(); blog.setId(rs.getInt("id")); blog.setCategory_id(rs.getInt("category_id")); blog.setTitle(rs.getString("title")); blog.setContent(rs.getString("content")); blog.setCreated_time(rs.getDate("created_time")); list.add(blog); } return list; } catch (SQLException e) { e.printStackTrace(); } finally { JDBCUtil.release(rs, ps, conn); } return null; } //總記錄數public int getTotal() { Connection conn = JDBCUtil.getConnection(); PreparedStatement ps = null; ResultSet rs = null; try { ps = conn.prepareStatement("select count(*) from blog"); rs = ps.executeQuery(); if (rs.next()) { return rs.getInt(1); } } catch (SQLException e) { e.printStackTrace(); } finally { JDBCUtil.release(rs, ps, conn); } return 0; }}service層
public class BlogService { BlogDao blogDao = new BlogDao(); //返回pagebean,所有分頁需要的信息都去pagebean裡查找public BlogPage findPageRecord(int pageno) { int totalrecord = blogDao.getTotal(); BlogPage blogpage = new BlogPage(pageno, totalrecord); List<Blog> list = blogDao.getPageRecord(blogpage.getPagenostart(),blogpage.getPagesize()); blogpage.setPagerecord(list); return blogpage; }}servlet類
@WebServlet("/BlogSplitServlet")public class BlogSplitServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html; charset=utf-8"); String pagenostr=request.getParameter("pageno"); //首次訪問servletpagenostr為null，給一個初始值，即默認訪問第一頁int pageno=1; if(pagenostr!=null) pageno=Integer.parseInt(pagenostr); BlogService service=new BlogService(); BlogPage blogPage=service.findPageRecord(pageno); request.setAttribute("blogPage", blogPage); request.getRequestDispatcher("/blogPage.jsp").forward(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); }}這樣所有的分頁信息就封裝到pagebean裡了
jsp實現只需要將pagebean裡的信息取出來就行了
下面給出我的jsp實現（模擬ligerUI）
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><%@page import="java.util.*,model.Blog,model.BlogPage"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Insert title here</title><script type="text/javascript"> window.onload = function() { //保證select的option與當前頁顯示一致select = document.getElementById("select"); pageno = '${blogPage.pageno}'; select.options[pageno - 1].selected = 'selected'; } //select下拉列表跳轉function selectjump() { var pageno = select.selectedIndex + 1; window.location.href = "http://localhost/jspPageSplit/BlogSplitServlet?pageno=" + pageno; } //text跳轉，onblur事件，輸入框失去焦點是發生function textjump() { var pageno = document.getElementById("text").value; window.location.href = "http://localhost/jspPageSplit/BlogSplitServlet?pageno=" + pageno; }</script></head><body> <% BlogPage blogPage = (BlogPage) request.getAttribute("blogPage"); List<Blog> list = blogPage.getPagerecord(); // 尾頁填充空白行，若不填充，尾頁表格tr行數與前面不一致很難看if (list.size() < blogPage.getPagesize()) { for (int i = list.size(); i < blogPage.getPagesize(); i++) list.add(null); } %> <div> <table cellspacing="0" bgcolor="#CEF0C5"> <tr> <td>id</td><td>標題</td><td>內容</td><td>創建時間</td> </tr> <% for (Blog blog : list) { if (blog != null) { %> <tr> <td><%=blog.getId()%></td> <td><%=blog.getTitle()%></td> <td><%=blog.getContent()%></td> <td><%=blog.getCreated_time()%></td> </tr> <!-- 尾頁空白行填充--> <%} else {%> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <%}}%> </table> <div style="height:50px;background-color: #4B7DB3;line-height: 40px;"> <!-- select下拉框--> <select id="select"> <%for (int i = 1; i <= blogPage.getTotalpage(); i++) {%> <option onclick="selectjump()"><%=i%></option> <%}%> </select> <a href="${pageContext.request.contextPath}/BlogSplitServlet?pageno=1">首頁</a> <a href="${pageContext.request.contextPath}/BlogSplitServlet?pageno=<%=blogPage.getPageno()-1<1?blogPage.getPageno():blogPage.getPageno()-1%>">上一頁</a> <input type="text" id="text" size="1px" value="${blogPage.pageno}" onblur="textjump()">/${blogPage.totalpage} <a href="${pageContext.request.contextPath}/BlogSplitServlet?pageno=<%=blogPage.getPageno()+1>blogPage.getTotalpage()?blogPage.getPageno():blogPage.getPageno()+1%>">下一頁</a> <a href="${pageContext.request.contextPath}/BlogSplitServlet?pageno=<%=blogPage.getTotalpage()%>">尾頁</a> <div style="float: right;"> 顯示從${blogPage.pagenostart+1}到${blogPage.pageno==blogPage.totalpage?blogPage.totalrecord:blogPage.pagesize}, 共${blogPage.totalrecord}條. 每頁顯示${blogPage.pagesize}條</div> </div> </div></body></html>這是最後的樣子，樣式粗略的調了下，功能跟ligerUI默認的分頁一模一樣
將JSP中代碼改為標籤（JSTL，需引入相應的jar包）並將JSP中的尾頁補白放在servlet中後
servlet中加入
// 尾頁填充空白行，若不填充，尾頁表格tr行數與前面不一致很難看List<Blog> list = blogPage.getPagerecord(); if (list.size() < blogPage.getPagesize()) { for (int i = list.size(); i < blogPage.getPagesize(); i++) list.add(null); } blogPage.setPagerecord(list);jsp頁面
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><%@page import="java.util.*,model.Blog,model.BlogPage"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Insert title here</title><script type="text/javascript"> //select下拉列表跳轉function selectjump() { var select = document.getElementById("select"); var pageno = select.selectedIndex + 1; window.location.href = "http://localhost/jspPageSplit/BlogSplitServlet?pageno=" + pageno; } //text跳轉，onblur事件，輸入框失去焦點時發生function textjump() { var pageno = document.getElementById("text").value; window.location.href = "http://localhost/jspPageSplit/BlogSplitServlet?pageno=" + pageno; }</script></head><body> <div> <table cellspacing="0" bgcolor="#CEF0C5"> <tr> <td>id</td><td>標題</td><td>內容</td><td>創建時間</td> </tr> <c:forEach items="${blogPage.pagerecord}" var="c" varStatus="vs"> <c:if test="${c!=null}"> <tr> <td>${c.id}</td> <td>${c.title}</td> <td>${c.content}</td> <td>${c.created_time}</td> </tr> </c:if> <!-- 尾頁空白行填充--> <c:if test="${c==null}"> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </c:if> </c:forEach> </table> <div style="height:50px;background-color: #4B7DB3;line-height: 40px;"> <!-- select下拉框--> <select id="select"> <c:forEach begin="1" end="${blogPage.totalpage}" var="i"> <option value="${i}" onclick="selectjump()" ${blogPage.pageno==i?'selected="selected"':''}>${i}</option> </c:forEach> </select> <a href="${pageContext.request.contextPath}/BlogSplitServlet?pageno=1">首頁</a> <a href="${pageContext.request.contextPath}/BlogSplitServlet?pageno=${blogPage.pageno-1<1?blogPage.pageno:blogPage.pageno-1}">上一頁</a> <input type="text" id="text" size="1px" value="${blogPage.pageno}" onblur="textjump()">/${blogPage.totalpage} <a href="${pageContext.request.contextPath}/BlogSplitServlet?pageno=${blogPage.pageno+1>blogPage.totalpage?blogPage.pageno:blogPage.pageno+1}">下一頁</a> <a href="${pageContext.request.contextPath}/BlogSplitServlet?pageno=${blogPage.totalpage}">尾頁</a> <div style="float: right;"> 顯示從${blogPage.pagenostart+1}到${blogPage.pageno==blogPage.totalpage?blogPage.totalrecord:blogPage.pagesize}, 共${blogPage.totalrecord}條. 每頁顯示${blogPage.pagesize}條</div> </div> </div></body></html>實際運用中可以根據需求編寫jsp頁面，但是後台代碼基本是通用的
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。