javabean servlet jsp實現分頁功能代碼解析

2019-11-26 13:49:28

字體：大中小

來源：轉載

供稿：網友

前端實現用ligerUI實現分頁，感覺用框架確實簡單，閑著無聊，模擬著liger的分頁界面實現了一遍（只要是功能，樣式什么無視）

這里用基礎的三層架構+servlet+jsp實現，思路很簡單，把所有分頁相關信息寫入到一個pagebean類里面，service返回這個bean類，每次分頁查詢時都從該bean里查找信息。只是其中的細節問題比較繁瑣，如邊界處理（前端和后臺邊界都要處理），下拉框跳轉后要顯示當前頁等等

這是ligerUI實現的分頁樣式（實現過程我的上一篇博客有寫：//m.survivalescaperooms.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 + ", title=" + title + ", 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 style="width: 50%; height: 400px">  <table border="1" cellspacing="0" width="100%" bgcolor="#CEF0C5">   <tr height="40px">    <td>id</td><td>標題</td><td>內容</td><td>創建時間</td>   </tr>   <%    for (Blog blog : list) {     if (blog != null) {   %>   <tr height="50px">    <td width="10%"><%=blog.getId()%></td>    <td width="20%"><%=blog.getTitle()%></td>    <td width="40%"><%=blog.getContent()%></td>    <td width="30%"><%=blog.getCreated_time()%></td>   </tr>   <!-- 尾頁空白行填充 -->   <%} else {%>   <tr height="50px">    <td width="10%"></td>    <td width="20%"></td>    <td width="40%"></td>    <td width="30%"></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 style="width: 50%; height: 400px">  <table border="1" cellspacing="0" width="100%" bgcolor="#CEF0C5">   <tr height="40px">    <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 height="50px">    <td width="10%">${c.id}</td>    <td width="20%">${c.title}</td>    <td width="40%">${c.content}</td>    <td width="30%">${c.created_time}</td>   </tr>   </c:if>   <!-- 尾頁空白行填充 -->   <c:if test="${c==null}">   <tr height="50px">    <td width="10%"></td>    <td width="20%"></td>    <td width="40%"></td>    <td width="30%"></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頁面，但是后臺代碼基本是通用的