Code Analysis of Pagination Functionality in javabean servlet jsp

Front-end implementation uses ligerUI to implement pagination, it feels that using a framework is indeed simple. Bored, I simulated the liger pagination interface (ignoring functionality and style as long as it works).　

Here we use the basic three-tier architecture+servlet+jsp implementation, the idea is very simple, write all pagination-related information into a pagebean class, and the service returns this bean class. Every time a pagination query is performed, information is searched from the bean. However, the details are quite繁琐, such as boundary handling (both front-end and back-end boundaries need to be handled), after the dropdown box jumps, the current page needs to be displayed, etc.　

This is the pagination style implemented by ligerUI (the implementation process is described in my previous blog: https://www.oldtoolbag.com/article/92850.htm)　

Simulation implementation process:　

directory structure

　

model layer

　

a database corresponding model (Blog), and a 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 and setter methods
　　//@Override
 public String toString() {
 return "Blog [id="
  id + category_id=" + " + category_id + "1#]", content=" + content
    + ", created_time=" + created_time + "]";
 } 
}

public class BlogPage {
 private List<Blog> pagerecord;//Records per page
 private int pageno;//Current page
 private int pagenostart;//Starting index of each page
 private int pagesize=5;//Number of data per page
 private int totalrecord;//Total number of records
 private int totalpage;//Total number of pages
 public BlogPage(int pageno,int totalrecord){
  //pageno totalrecord can be used as existing information
  this.totalrecord=totalrecord;
  //Calculate the total number of pages
  totalpage=(totalrecord%pagesize==0)?totalrecord/pagesize:totalrecord/pagesize+1;
  //Boundary handling of pageno
  if(pageno<=1)
   this.pageno=1;
  else if(pageno>=totalpage)
   this.pageno=totalpage;
  else
   this.pageno=pageno;
  //Calculate the starting index of each page, that is, the index of the first data in each page, for pagination query
  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 layer

JDBCUtil encapsulates the connection and release operations of 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;
  }
   e.printStackTrace();
  }
  return null;
 }
 public static void release(ResultSet rs,PreparedStatement ps,Connection conn){
  if(rs!=null){
   try {
    rs.close();
   }
    e.printStackTrace();
   }
  }
  if(ps!=null){
   try {
    ps.close();
   }
    e.printStackTrace();
   }
  }
  if(conn!=null){
   try {
    conn.close();
   }
    e.printStackTrace();
   }
  }
 }
}

public class BlogDao {
 //Records per page, used for pagination by passing the starting index and size of each page, i.e., the two parameters of limit (MySQL uses limit for pagination)
 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;
  }
   e.printStackTrace();
  }
   JDBCUtil.release(rs, ps, conn);
  }
  return null;
 }
 //Total number of records
 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);
   }
  }
   e.printStackTrace();
  }
   JDBCUtil.release(rs, ps, conn);
  }
  return 0;
 }
}

service layer　

public class BlogService {
 BlogDao blogDao = new BlogDao();
 //Return pagebean, all the information needed for all pagination can be found in 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 class　

@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");
  //The first visit, if servletpagenostr is null, assign an initial value, i.e., default to the first page
  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
 }
 public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  doGet(request, response);
 }
}

In this way, all pagination information is encapsulated into pagebean　

jsp implementation only needs to extract the information from pagebean　

Below is my jsp implementation (simulating 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() {
  //ensure that the select option matches the current page display
  select = document.getElementById("select");
  pageno = '${blogPage.pageno}';
  select.options[pageno - 1].selected = 'selected';
 }
 //Select dropdown list jump
 function selectjump() {
  var pageno = select.selectedIndex + 1;
  window.location.href = "http://localhost/jspPageSplit/BlogSplitServlet?pageno="
    + pageno;
 }
 //text jump, onblur event, input box loses focus when
 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();
  // Fill blank lines at the end page, if not filled, the number of tr rows in the table of the last page will be inconsistent with the previous ones, which looks very bad
  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>Title</td><td>Content</td><td>Creation Time</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>
   <!-- Tail Page Blank Row Filling -->
   <%} 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 Dropdown Box -->
  <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">Home</a>
  <a href="${pageContext.request.contextPath}/BlogSplitServlet?pageno=<%=blogPage.getPageno()-1<1?get page number: blogPage.getPageno():blogPage.getPageno()-1%>>Previous Page</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>get total pages: blogPage.getTotalpage()?get page number: blogPage.getPageno():blogPage.getPageno()+1%>">Next Page</a>
  <a href="${pageContext.request.contextPath}/BlogSplitServlet?pageno=<%=blogPage.getTotalpage()%>">Last Page</a>
  <div style="float: right;">
  Display from ${blogPage.pagenostart+1}} to ${blogPage.pageno==blogPage.totalpage?blogPage.totalrecord:blogPage.pagesize},
  A total of ${blogPage.totalrecord} items. Display ${blogPage.pagesize} items per page
  </div>
  </div>
 </div>
</body>
</html>

This is the final look, the style is roughly adjusted, and the function is exactly the same as the pagination of ligerUI by default　

Change the code in JSP to tags (JSTL, need to import the corresponding jar package) and put the end page padding in servlet after　

Add to servlet　

// Fill blank lines at the end page, if not filled, the number of tr rows in the table of the last page will be inconsistent with the previous ones, which looks very bad
  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　

<%@ 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 dropdown list jump
 function selectjump() {
  var select = document.getElementById("select");
  var pageno = select.selectedIndex + 1;
  window.location.href = "http://localhost/jspPageSplit/BlogSplitServlet?pageno="
    + pageno;
 }
 //Text jump, triggered by the onblur event when the input box loses focus
 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>Title</td><td>Content</td><td>Creation Time</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>
   <!-- Tail Page Blank Row Filling -->
   <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 Dropdown Box -->
  <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">Home</a>
  <a href="${pageContext.request.contextPath}/BlogSplitServlet?pageno=${blogPage.pageno-1<1?blogPage.pageno:blogPage.pageno-1}">Previous Page</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}">Next Page</a>
  <a href="${pageContext.request.contextPath}/BlogSplitServlet?pageno=${blogPage.totalpage}">Last Page</a>
  <div style="float: right;">
  Display from ${blogPage.pagenostart+1}} to ${blogPage.pageno==blogPage.totalpage?blogPage.totalrecord:blogPage.pagesize},
  A total of ${blogPage.totalrecord} items. Display ${blogPage.pagesize} items per page
  </div>
  </div>
 </div>
</body>
</html>

　In practical application, jsp pages can be written according to requirements, but the background code is basically universal　

That's all for this article. I hope it will be helpful to everyone's learning and also hope everyone will support the Yelling Tutorial more.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (When sending an email, please replace # with @ to report, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)