English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
frontend реализация pagination с помощью ligerUI, на мой взгляд, использование фреймворка действительно просто, свободное время, имитируя интерфейс pagination liger, реализовал его (будь то функция, стиль и т.д., можно не обращать внимания)
Здесь используется базовая тройная архитектура + servlet + jsp для реализации, идея очень проста, все相关信息 о pagination записываются в класс pagebean, service возвращает этот bean, при каждом запросе pagination информация ищется в этом bean. Однако детализация проблемы несколько сложна, например, обработка границ (границы между frontend и backend должны быть обработаны), после перехода в раскрывающийся список необходимо показать текущую страницу и т.д.
Это реализация лigerUI для стиля pagination (процесс, который я описал в предыдущей статье: https://ru.oldtoolbag.com/article/92850.htm)
модель 实现:
структура каталога
база данных (mysql)
слой моделиМодель данных для базы данных (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="[#1#]", 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; } 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 { //每页的记录,传入每页开始索引和每页大小用于分页,即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; } e.printStackTrace(); } 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); } } e.printStackTrace(); } JDBCUtil.release(rs, ps, conn); } return 0; } }
сервисный уровень
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; } }
сервлетный класс
@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); } }
In this way, all pagination information is encapsulated into the pagebean
The jsp implementation only needs to extract the information from the 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>Вставьте заголовок здесь</title> <script type="text/javascript"> window.onload = function() { //Ensure that the select option is consistent with the current page display select = document.getElementById("select"); pageno = '${blogPage.pageno}'; select.options[pageno - 1].selected = 'selected'; } //Перейти по списку выбора 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 and occurs 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-пакеты) и поместите補白 на конце страницы в 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>Вставьте заголовок здесь</title> <script type="text/javascript"> //Перейти по списку выбора function selectjump() { var select = document.getElementById("select"); var pageno = select.selectedIndex + 1; window.location.href = "http://localhost/jspPageSplit/BlogSplitServlet?pageno=" + pageno; } //Перейти к тексту, событие 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-страницы можно создавать по мере необходимости, но базовый код на заднем плане一般是通用的
Вот и все, что было в этой статье, я надеюсь, что это поможет вам в изучении, и希望大家多多支持呐喊教程。
Заявление: содержание этой статьи взято из Интернета, авторские права принадлежат соответствующему автору, материал был自发но предоставлен пользователями Интернета и загружен самостоятельно, сайт не имеет права собственности, материал не был отредактирован вручную, и не несет ответственности за связанные с этим юридические вопросы. Если вы обнаружите материал,涉嫌侵犯版权, пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма замените # на @) для сообщения о нарушении,并提供相关证据. При подтверждении факта нарушения сайт незамедлительно удаляет涉嫌侵权的内容。