分页(跟着宝哥学java:javaee)手写分页

1 分页概念

把数据以分页形式展示

在这里插入图片描述

2 创建实体类 封装分页相关的所有数据

package com.zhiyou100.entity;

import java.util.List;

public class FenYeBean<T> {
	private Integer pageNumber;// 当前页数
	private Integer count;// 总记录数
	//private Integer pageTotal;// 总页数
	private Integer pageSize;// 每页记录数
	//private Integer startIndex;// 起始索引
	private List<T> list;// 当前页显示的记录

	public Integer getPageNumber() {
		return pageNumber;
	}

	public void setPageNumber(Integer pageNumber) {
		this.pageNumber = pageNumber;
	}

	public Integer getCount() {
		return count;
	}

	public void setCount(Integer count) {
		this.count = count;
	}

	public Integer getPageTotal() {
		return count/pageSize+count%pageSize==0?0:1;
	}

	public Integer getPageSize() {
		return pageSize;
	}

	public void setPageSize(Integer pageSize) {
		this.pageSize = pageSize;
	}

	public Integer getStartIndex() {
		return (pageNumber-1)*pageSize;
	}

//	public void setStartIndex(Integer startIndex) {
//		this.startIndex = startIndex;
//	}

	public List<T> getList() {
		return list;
	}

	public void setList(List<T> list) {
		this.list = list;
	}

	@Override
	public String toString() {
		return "FenYeBean [pageNumber=" + pageNumber + ", count=" + count + ", pageTotal=" + getPageTotal() + ", pageSize="
				+ pageSize + ", startIndex=" + getStartIndex() + ", list=" + list + "]";
	}


	public FenYeBean() {
		super();
	}

}

3 修改dao:添加方法

// 获取所有分页
public List<Student> getAll(int startIndex,int pageSize) {
    Connection con = JdbcUtil.getCon();
    PreparedStatement pre = null;
    ResultSet set = null;
    List<Student> list = new ArrayList<Student>();
    try {
        pre = con.prepareStatement("select * from student limit ?,?");
        pre.setInt(1, startIndex);
        pre.setInt(2, pageSize);
        set = pre.executeQuery();
        while (set.next()) {
            list.add(new Student(set.getInt("sid"), set.getString("sname"), set.getString("sex"),
                                 set.getFloat("score"), set.getDate("sbirth"), set.getBoolean("sdy"), set.getString("sphoto")));
        }
    } catch (Exception e) {
        throw new RuntimeException(e);
    }
    JdbcUtil.close(con, pre, set);
    return list;
}
// 获取总记录数
public int getCount() {
    Connection con = JdbcUtil.getCon();
    PreparedStatement pre = null;
    ResultSet set = null;
    int count=0;
    try {
        pre = con.prepareStatement("select count(*) con from student");
        set = pre.executeQuery();
        if (set.next()) {
            count=set.getInt("con");
        }
    } catch (Exception e) {
        throw new RuntimeException(e);
    }
    JdbcUtil.close(con, pre, set);
    return count;
}

4 创建分页的servlet: /student/getAllFenYe.do

package com.zhiyou100.servlet;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.zhiyou100.dao.StudentDao;
import com.zhiyou100.entity.FenYeBean;
import com.zhiyou100.entity.Student;

public class StudentGetAllFenYe extends HttpServlet {
	/*
	     java43:天道酬勤 不忘初衷!
	               宝哥:2022年10月31日 上午10:35:20
	*/

	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		FenYeBean<Student> fenYeBean=new FenYeBean<Student>();
		//获取当前页数
		int pageNumber=1;
		if(req.getParameter("pageNumber")!=null){
			pageNumber=Integer.parseInt("pageNumber");
		}
		StudentDao studentDao=new StudentDao();
		//设置每页记录数
		fenYeBean.setPageSize(5);
		//获取总记录数
		int count=studentDao.getCount();
		fenYeBean.setCount(count);
	    //对fenYeBean进行合理性判断
		//下限判断
		pageNumber=pageNumber<=0?1:pageNumber;
		//上线判断
		pageNumber=pageNumber>fenYeBean.getPageTotal()?fenYeBean.getPageTotal():pageNumber;
		fenYeBean.setPageNumber(pageNumber);
		
		//获取所有学生的信息
		List<Student> list=studentDao.getAll(fenYeBean.getStartIndex(),fenYeBean.getPageSize());
		fenYeBean.setList(list);
		//设置request域属性
		req.setAttribute("fenYeBean", fenYeBean);
		//跳转到manager.jsp
		req.getRequestDispatcher("/jsp/student/manager_fenye.jsp").forward(req, resp);
		
	}
    ....
}

5 创建jsp:/jsp/student/manager_fenye.jsp

<%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%>
<%@page import="com.zhiyou100.entity.Student"%>
<%@page import="java.util.List"%>
<%@page import="com.zhiyou100.entity.Teacher"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!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">
<link type="text/css" rel="stylesheet" href="<c:url value='/css/app.css'/>"/>
<style type="text/css">
#tab_student_list{
	width:1100px;
	margin:10px auto;
}
img{
   width:100px;
   height:100px;
}
</style>
<title>学生管理页面</title>
</head>
<body>
        <!-- 显示当前登录者的信息 -->
        <h3 style="color:blue;">当前登陆者:${sessionScope.teacher.tname} | 
                                 <a href="<c:url value='/'/>teacher/logout.do">登出</a>
        </h3>
        <!-- 判断请求域属性message是否有值 有值就显示 -->
	    <c:if test="${not empty requestScope.message}">
           <h3>${message}</h3>
        </c:if>
        <!-- 显示所有学生的信息 -->
        --%>
        <c:if test="${empty requestScope.fenYeBean}">
            <jsp:forward page="/student/getAllFenYe.do"/>
        </c:if>
        <table id="tab_student_list">
              <tr><th>学号</th><th>名字</th><th>性别</th><th>分数</th><th>生日</th><th>政治</th><th>头像</th><th>操作</th></tr>
              <c:forEach  items="${requestScope.fenYeBean.list}" var="stu">
                     <tr>
                         <td>${stu.sid}</td>
                         <td>${stu.sname}</td>
                         <td>${stu.sex}</td>
                         <td>${stu.score}</td>
                         <td><fmt:formatDate value="${stu.sbirth}" pattern="yyyy年MM月dd日"/></td>
                         <td>
                             <c:choose>
                                  <c:when test="${stu.sdy}">
                                      	 党员
                                  </c:when>
                                  <c:otherwise>
                                       	  群众
                                  </c:otherwise>
                             </c:choose>
                         </td>
                         <td><img src="<c:url value='/imgs/${stu.sphoto}'/>"  onclick="downloadImg('${stu.sphoto}')"/></td>
                         <td><a href="<c:url value='/'/>jsp/student/updateOne.jsp?sid=${stu.sid}">修改</a> | <a href="<c:url value='/'/>student/delete.do?sid=${stu.sid}">删除</a></td>
                     </tr>
              </c:forEach>
              <tr><th colspan="7"><a href="<c:url value='/'/>jsp/student/addOne.jsp">添加学生</a></th></tr>
        </table>
        <script type="text/javascript">
            function downloadImg(imgName){
            	//请求servlet即可
            	location.href="<c:url value='/student/downlaodSphoto.do?sphoto='/>"+imgName;
            }
        </script>
</body>
</html>
  • 修改登录成功后跳转的页面时manager_fenye.jsp而不再是manager.jsp
  • 测试

在这里插入图片描述

6 在manager_fenye.jsp中添加页码的选择

6.1 效果如下

在这里插入图片描述

6.2 更改manager_fenye.jsp

<%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%>
<%@page import="com.zhiyou100.entity.Student"%>
<%@page import="java.util.List"%>
<%@page import="com.zhiyou100.entity.Teacher"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!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">
<link type="text/css" rel="stylesheet" href="<c:url value='/css/app.css'/>"/>
<style type="text/css">
#tab_student_list{
	width:1100px;
	margin:10px auto;
}
img{
   width:100px;
   height:100px;
}
div{
  
   font-size: 20px;
   font-weight: bold;
   padding: 5px;
}
#div_fenye{
    width:1100px;
	margin:10px auto;
	text-align: center;
	height: 60px;
}
.div_fenye_li{
    float:left;
    margin:10px;
     background-color: #cccccc;
}
</style>
<title>学生管理页面</title>
</head>
<body>
          
        ...
        <!-- 页面选择的div -->
        <div id="div_fenye">
             <c:if test="${requestScope.fenYeBean.pageNumber ne 1}">
                    <div class="div_fenye_li"  onmouseover="changeBGC(this,1)" onmouseout="changeBGC(this,0)"  onclick="changePageNumber(${requestScope.fenYeBean.pageNumber-1})">&lt; 上一页</div>
             </c:if>
             <c:forEach begin="1" end="${requestScope.fenYeBean.pageTotal}" var="pn">
                  <div class="div_fenye_li" onmouseover="changeBGC(this,1)" onmouseout="changeBGC(this,0)" onclick="changePageNumber(${pn})">&nbsp;${pn}&nbsp;</div>
             </c:forEach>
             <c:if test="${requestScope.fenYeBean.pageNumber ne requestScope.fenYeBean.pageTotal}">
                  <div class="div_fenye_li" onmouseover="changeBGC(this,1)" onmouseout="changeBGC(this,0)" onclick="changePageNumber(${requestScope.fenYeBean.pageNumber+1})">下一页 &gt;</div>            
             </c:if>
             
        </div>
        <script type="text/javascript">
           function changeBGC(node,n){
        	   if(n){
        		  node.style.backgroundColor="#0033ff";
        	   }else{
        		  node.style.backgroundColor="#cccccc";
        	   }
           }
           function changePageNumber(n){
        	   alert(n);
        	   location.href="<c:url value='/student/getAllFenYe.do?pageNumber='/>"+n;
           }
        </script>
        
</body>
</html>
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值