The front-end implementation uses ligerUI to implement paging. It feels that using the framework is really simple, and it is boring. It simulates the paging interface of liger and implements it (as long as it is a function, it ignores the style)
Here we use the basic three-layer architecture + servlet + jsp to implement it. The idea is very simple. Write all paging-related information into a pagebean class. The service returns this bean class. Each time the paging query is searched, the information is found from the bean. However, the details are quite complicated, such as boundary processing (both front-end and back-end boundaries need to be processed), the current page must be displayed after the drop-down box jumps, etc.
This is the pagination style implemented by ligerUI (Implementation process was written in my previous blog: //www.VeVB.COM/article/92850.htm)
Simulation implementation process:
Directory structure
Database (mysql)
The model layer, a database corresponding to the 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 + ", content=" + content + ", created_time=" + created_time + "]"; } } public class BlogPage { private List<Blog> pagerecord;//Record for each page private int pageno;//The current page private int pagenostart;//Each page start index private int pagesize=5;//How much data per page private int totalrecord;//Total records private int totalpage;//Total pages public BlogPage(int pageno,int totalrecord){ //pageno totalrecord can be regarded as existing information this.totalrecord=totalrecord; //Calculate the total number of pages totalpage=(totalrecord%pagesize==0)?totalrecord/pagesize:totalrecord/pagesize+1; //Border processing of pageno if(pageno<=1) this.pageno=1; else if(pageno>=totalpage) this.pageno=totalpage; else this.pageno=pageno; //Calculate the index of each page, that is, the index of the first data of each page, used 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 jdbc's connection and release operations
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 { //Records for each page, pass in each page start index and each page size for pagination, that is, two parameters of limit (mysql paging is used for 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; } //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); } } catch (SQLException e) { e.printStackTrace(); } finally { JDBCUtil.release(rs, ps, conn); } return 0; }}Service layer
public class BlogService { BlogDao blogDao = new BlogDao(); //Return pagebean, all information required for pagination go to the pagebean to find 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 time you access servletpagenostr is null, give an initial value, that is, the first page is accessed by default 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); }} In this way, all the paging information will be encapsulated into the pagebean
The jsp implementation only needs to retrieve the information in the pagebean
My jsp implementation (simulated ligerUI) is given below
<%@ 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 is consistent with the current page select = document.getElementById("select"); pageno = '${blogPage.pageno}'; select.options[pageno - 1].selected = 'selected'; } // Select drop-down list jump function selectjump() { var pageno = select.selectedIndex + 1; window.location.href = "http://localhost/jspPageSplit/BlogSplitServlet?pageno=" + pageno; } //text jump, onblur event, 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> <% BlogPage blogPage = (BlogPage) request.getAttribute("blogPage"); List<Blog> list = blogPage.getPagerecord(); // The last page is filled with blank rows. If not filled, the number of rows of the last page table tr is inconsistent with the previous one. It is ugly if (list.size() < blogPage.getPagesize()) { for (int i = list.size(); i < blogPage.getPagesize(); i++) list.add(null); } %> <div> <table cellpacing="0" bgcolor="#CEF0C5"> <tr> <td>id</td><td>Title</td><td>Content</td><td>Creation time</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> <!-- Last page blank line filling--> <%} else {%> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <%}}%> </table> <div style="height:50px;background-color: #4B7DB3;line-height: 40px;"> <!-- select drop-down 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?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>blogPage.getTotalpage()?blogPage.getPageno():blogPage.getPageno()+1%>">Next Page</a> <a href="${pageContext.request.contextPath}/BlogSplitServlet?pageno=<%=blogPage.getTotalpage()%>">Last Page</a> <div style="float: right;"> Shows ${blogPage.pagenostart+1} to ${blogPage.pageno==blogPage.totalpage?blogPage.totalrecord:blogPage.pagesize}, a total of ${blogPage.totalrecord} bars are displayed. Each page is displayed. </div> </div> </div></body></html> This is the last look. The style is roughly adjusted, and the function is exactly the same as the default pagination of ligerUI.
Change the code in JSP to a tag (JSTL, the corresponding jar package needs to be introduced) and put the last page filler in the JSP in servlet.
Added to the servlet
// The last page is filled with blank rows. If not filled, the number of rows in the last page table tr is inconsistent with the previous one. 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 drop-down 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, onblur event, function textjump() { var pageno = document.getElementById("text").value; window.location.href = "http://localhost/jspPageSplit/BlogSplitServlet?pageno=" + pageno; }</script></head><body> <div> <table cellpacing="0" bgcolor="#CEF0C5"> <tr> <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> <td>${c.id}</td> <td>${c.title}</td> <td>${c.content}</td> <td>${c.created_time}</td> </tr> </c:if> <!-- Last page blank line filling--> <c:if test="${c==null}"> <tr> <td></td> <td></td> <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 drop-down 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;"> Shows ${blogPage.pagenostart+1} to ${blogPage.pageno==blogPage.totalpage?blogPage.totalrecord:blogPage.pagesize}, a total of ${blogPage.totalrecord} bars are displayed. Each page is displayed. </div> </div> </div></body></html>In actual use, you can write jsp pages according to your needs, but the background code is basically general
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.