首页 > 代码库 > 分页显示——（一）
分页显示——（一）
1.思路介绍:
先定义一个封装分页数据的泛型工具类，控制层中通过前台传的页数与每页的数量向service要page对象，service层调用dao返回总数并调用dao取出数据(limit关键字)，dao层从数据库中取出service层所需要的数据，并提交给service层。这样就达到分页的效果。数据封装在pageBean的list中
2.PageBean工具类(泛型类)
package utils;/** * 分页工具类 */import java.util.ArrayList;import java.util.List;public class PageBean<T> { //当前页 private int currentPage; //当前页显示的条数 private int currentCount; //总条数 private int totalCount; //总页数 private int totalPage; //每页显示的数据 private List<T> productList = new ArrayList<T>(); public int getCurrentPage() { return currentPage; } public void setCurrentPage(int currentPage) { this.currentPage = currentPage; } public int getCurrentCount() { return currentCount; } public void setCurrentCount(int currentCount) { this.currentCount = currentCount; } public int getTotalCount() { return totalCount; } public void setTotalCount(int totalCount) { this.totalCount = totalCount; } public int getTotalPage() { return totalPage; } public void setTotalPage(int totalPage) { this.totalPage = totalPage; } public List<T> getProductList() { return productList; } public void setProductList(List<T> productList) { this.productList = productList; } }
3 . 控制层中通过前台传的页数与每页的数量向service要page对象
package web;import java.io.IOException;import java.sql.SQLException;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import daomain.User;import service.UserService;import utils.PageBean;@WebServlet("/userfenye")public class Userfenye extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { UserService service = new UserService(); //模拟当前是第一页，如果刚进来显示第一页数据 String currentPageStr = request.getParameter("currentPage"); if(currentPageStr==null) currentPageStr="1"; int currentPage = Integer.parseInt(currentPageStr); //认为每页显示12条，后期可以根据用户输入设置每页显示的页数 int currentCount = 8; PageBean<User> pageBean = null; try { pageBean = service.findPageBean(currentPage,currentCount); } catch (SQLException e) { e.printStackTrace(); } request.setAttribute("pageBean", pageBean); System.out.println(pageBean.getProductList()); request.getRequestDispatcher("/shangpinxianshi.jsp").forward(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); }}
4. service层调用dao返回总数并调用dao取出数据(limit关键字)
package service;import java.sql.SQLException;import java.util.List;import dao.UserDao;import daomain.User;import utils.PageBean;public class UserService { private UserDao userDao; //谁调用服务谁创建dao public UserService() { userDao = new UserDao(); } public PageBean<User> findPageBean(int currentPage, int currentCount) throws SQLException { //目的：就是想办法封装一个PageBean 并返回 PageBean<User> pageBean = new PageBean(); //1、当前页private int currentPage; pageBean.setCurrentPage(currentPage); //2、当前页显示的条数private int currentCount; pageBean.setCurrentCount(currentCount); //3、总条数private int totalCount; int totalCount = userDao.getTotalCount(); pageBean.setTotalCount(totalCount); //4、总页数private int totalPage; /* * 总条数 当前页显示的条数 总页数 * 10 4 3 * 11 4 3 * 12 4 3 * 13 4 4 * * 公式：总页数=Math.ceil(总条数/当前显示的条数) * */ int totalPage = (int) Math.ceil(1.0*totalCount/currentCount); pageBean.setTotalPage(totalPage); //5、每页显示的数据private List<T> productList = new ArrayList<T>(); /* * 页数与limit起始索引的关系 * 例如 每页显示4条 * 页数 其实索引 每页显示条数 * 1 0 4 * 2 4 4 * 3 8 4 * 4 12 4 * * 索引index = (当前页数-1)*每页显示的条数 * */ int index = (currentPage-1)*currentCount; List<User> userList = userDao.findUserListForPageBean(index,currentCount); pageBean.setProductList(userList); System.out.println(userList); return pageBean; }}
5.dao层从数据库中取出service层所需要的数据，并提交给service层
(如果是最后一页的话，limit超出后只会取剩下的)
package dao;import java.sql.SQLException;import java.util.List;import org.apache.commons.dbutils.QueryRunner;import org.apache.commons.dbutils.handlers.BeanHandler;import org.apache.commons.dbutils.handlers.BeanListHandler;import org.apache.commons.dbutils.handlers.ScalarHandler;import daomain.User;import utils.DataSourceUtils;/** * * @author: qlq* @date : 2017年7月6日上午11:57:56* @description:chuli yonghu xinxi */public class UserDao { //获得全部的用户条数，返回一个整数 public int getTotalCount() throws SQLException { QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource()); String sql = "select count(*) from user"; Long query = (Long) runner.query(sql, new ScalarHandler()); return query.intValue(); } public List<User> findUserListForPageBean(int index, int currentCount) throws SQLException { QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource()); String sql = "select * from user limit ?,?"; return runner.query(sql, new BeanListHandler<User>(User.class), index,currentCount); }}
6.使用分页插件在页面进行显示
1. bootstrap分页插件使用简单，超过十个以上的页码显示是个问题
1.1 使用规则:
首先需要引入bootstrap的css和Jquery等三个文件
1.2 页面中使用显示分页标签
<%--items用于迭代的变量，var代表每次迭代之后存放名字 --%> <table border="1px" cellspacing="0px" align="center" cellpadding="0px"> <tr> <th>id</th> <th>姓名:</th> <th>图片</th> <th>密码</th> </tr> <c:forEach items="${pageBean.productList }" var="user"> <tr> <th>${user.id}</th> <th>${user.name}</th> <th><img alt="" src="${pageContext.request.contextPath }/${user.picture}" style="width: 180px; height: 120px"></th> <th>${user.password}</th> </tr> </c:forEach> </table> <!--分页 --> <div style="width: 380px; margin: 0 auto; margin-top: 50px;"> <ul class="pagination" style="text-align: center; margin-top: 10px;"> <!-- 上一页 --> <!-- 判断当前页是否是第一页 --> <c:if test="${pageBean.currentPage==1 }"> <li class="disabled"><a href="javascript:void(0);" aria-label="Previous"> <span aria-hidden="true">«</span> </a></li> </c:if> <c:if test="${pageBean.currentPage!=1 }"> <li><a href="${pageContext.request.contextPath }/userfenye?currentPage=${pageBean.currentPage-1}" aria-label="Previous"> <span aria-hidden="true">«</span> </a></li> </c:if> <c:forEach begin="1" end="${pageBean.totalPage }" var="page"> <!-- 判断当前页 --> <c:if test="${pageBean.currentPage==page }"> <li class="active"><a href="javascript:void(0);">${page}</a></li> </c:if> <c:if test="${pageBean.currentPage!=page }"> <li><a href="${pageContext.request.contextPath }/userfenye?currentPage=${page}">${page}</a></li> </c:if> </c:forEach> <!-- 判断当前页是否是最后一页 --> <c:if test="${pageBean.currentPage==pageBean.totalPage }"> <li class="disabled"><a href="javascript:void(0);" aria-label="Next"> <span aria-hidden="true">»</span> </a></li> </c:if> <c:if test="${pageBean.currentPage!=pageBean.totalPage }"> <li><a href="${pageContext.request.contextPath }/userfenye?currentPage=${pageBean.currentPage+1}" aria-label="Next"> <span aria-hidden="true">»</span> </a></li> </c:if> </ul> </div> <!-- 分页结束 -->
1.3 效果
2.好看的分页插件
2.1 导入其css与js文件(前提是导入jquery文件)
<link href="${pageContext.request.contextPath }/css/pagination.css" rel="stylesheet" type="text/css"/><link rel="stylesheet" href="${pageContext.request.contextPath }/css/bootstrap.min.css" type="text/css" /><script src="${pageContext.request.contextPath }/js/jquery-1.11.3.js" type="text/javascript"></script><script src="${pageContext.request.contextPath }/js/bootstrap.min.js" type="text/javascript"></script><script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.pagination.js"></script>
2.2 使用分页标签
1.Html中在表格后面定义一个div
<div id="News-Pagination"></div>
2.定义一个表单让其隐藏，点击页数的时候修改表单的action地址提交表单访问servlet。
(结合条件查询后可将条件封装在表单中提交查询，是否隐藏看具体情况)
<form action="/fenye2/userfenye" id="stuForm" method="post" style="display: none"> 姓名:<input type="text" name="stuName" value="${stuName }"> 性别: <select name="gender" id="gender" style="width:80px"> <option value="0">全部</option> <option value="1">男</option> <option value="2">女</option> </select> <input type="submit" value="查询"> </form>
3.头文件中定义JS文件
<script type="text/javascript">//点击分页按钮以后触发的动作function handlePaginationClick(new_page_index, pagination_container) { //更改表单的请求地址后向Servlet请求数据 $("#stuForm").attr("action", "/fenye2/userfenye?currentPage=" + (new_page_index+1)); //前端从0开始，后端从1开始，因此要加1 $("#stuForm").submit(); return false;} $(function(){ $("#News-Pagination").pagination(${pageBean.totalCount}, { items_per_page:${pageBean.currentCount}, // 每页显示多少条记录 current_page:${pageBean.currentPage} - 1, // 当前显示第几页数据(后端比前端多一) num_display_entries:5, // 分页显示的条目数 next_text:"下一页", //上下页显示标志 prev_text:"上一页", num_edge_entries:2, // 连接分页主体，显示的条目数 callback:handlePaginationClick //回调函数 }); });</script>
4. 使用时需要修改的几处地方
3.EasyUI的分页插件(使用简单好看)
引入:
分页代码:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Layout（布局）</title> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> <script src="../js/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="paginationID" style="background:#efefef;border:1px solid #ccc;width:800px"></div> </body> <script> // pagination组建名 $(‘#paginationID‘).pagination({ // 组件属性 "total": 1000, "pageSize": 10, "pageNumber": 1, "pageList": [10, 20], "layout": [‘list‘, ‘sep‘, ‘first‘, ‘prev‘, ‘manual‘, ‘next‘, ‘last‘, ‘links‘], "onSelectPage": function(pageNumber, b) { alert("pageNumber=" + pageNumber); alert("pageSize=" + b); } }); </script></html>
效果:
分页显示——（一）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。