一、写界面框架:
<html>
<head>
<title>学生管理系统</title>
<style>
body { font-family: '微软雅黑'; background-color: #e0f7fa; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; margin-top: 150px;}
.container { background-color: #ffffff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 90%; max-width: 800px; text-align: center; }
h1 { color: #00796b; margin-bottom: 20px; }
.btn { display: block; width: 100%; padding: 12px; margin: 10px 0; font-size: 18px; color: #ffffff; background-color: #00796b; border: none; border-radius: 6px; cursor: pointer; }
.btn:hover { background-color: #004d40; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
th { background-color: #e0f7fa; color: black; }
tr:nth-child(even) { background-color: lightyellow; }
tr:hover { background-color: #e0f7fa; }
</style>
</head>
<body>
<div class='container'>
<h1>学生信息管理</h1>
<div><a href='insertStudent.jsp'>添加信息</a></div>
<table>
<tr><th>id</th><th>姓名</th><th>性别</th><th>年龄</th><th>操作一</th><th>操作二</th></tr>
<tr>
<td><%=findye.get(i).getID()%></td>
<td><%=findye.get(i).getName()%></td>
<td><%=findye.get(i).getSex()%></td>
<td><%=findye.get(i).getAge()%></td>
<td><a onclick=if(confirm('确定删除吗?'))return true; return false; href=delok?id=<%=findye.get(i).getID()%>>删除</a></td>
<td><a href=update.jsp?id=<%=findye.get(i).getID()%>>更新</a></td>
<%-- <a onclick=\"if(confirm('确定删除吗?')) return true; return false;\" href=delone?id="+findye.get(i).getId()+">删除</a>--%>
</tr>
<%
}
%>
</table>
</div>
</body>
</html>
这样我们就得到了界面的基本框架。
二、写分页逻辑:
分页的写法只要写好两部分,一部分是当前页面的展示;另一部分是下一页面的展示。
当前页面的展示:
首先:我们要查询到展示的数据:
InputStream in = Resources.getResourceAsStream("mybatis-config.xml");
SqlSessionFactory factory = new SqlSessionFactoryBuilder().build(in);
SqlSession sqlSession = factory.openSession();
UserDao userDao = sqlSession.getMapper(UserDao.class);
List<user> all = userDao.findall();
这里用的是Mybatisd的方法;
其次就是当前页面要放多少数据和如何放数据的问题:
//1、设定每一页的记录数
int pageSize=3;
//2、计算总的记录数
int size = all.size();
//3、分页总数
// int i1 = size/ pageSize;
int i1=(size% pageSize==0?(size/ pageSize):(size/ pageSize+1));
//4、初始化当前页
int curage = 1;
if (request.getParameter("curage") == null) {
curage = 1;
} else {
curage= Integer.valueOf(request.getParameter("curage"));
}
int offset = (curage - 1) * pageSize; // 计算偏移量
// int limit = pageSize; // 限制数量
//构建sql语句查询当前页的记录数
// String sql="select * from stu limit "+offset+", "+limit;
//6、获取当前页数据
List<user> findye = userDao.findye(offset,pageSize);
对于每页放多少数据,这个方法可以保证每页数据按顺序一页一页展示
//查找数据的Mybatis写法
@Select("select * from stu limit #{offset},#{pageSize}")
List<user> findye(@Param("offset")Integer offset,@Param("pageSize")Integer pageSize);
这样我们就能保证当前页面的数据内容。
下一页展示:
这个if语句保证了页数的跳转,当浏览器的页数为空时,说明我们并没有点击页数的变换,那就是第一页。
当用户点击下一页时,也数就上传到了浏览器,这样我们就能抓取浏览器的数字从而实现页数的跳转。
跳转按钮的:
<%
if(curage==1){
%>
<span>首页</span>
<span>上一页</span>
<a href="shoulist2.jsp?curage=<%=curage+1%>">下一页</a>
<a href="shoulist2.jsp?curage=<%=i1%>">尾页</a>
<%
}else if (curage==i1){
%>
<a href="shoulist2.jsp?curage=1">首页</a>
<a href="shoulist2.jsp?curage=<%=curage-1%>">上一页</a>
<span>下一页</span>
<span>尾页</span>
<%
}else{
%>
<a href="shoulist2.jsp?curage=1">首页</a>
<a href="shoulist2.jsp?curage=<%=curage-1%>">上一页</a>
<a href="shoulist2.jsp?curage=<%=curage+1%>">下一页</a>
<a href="shoulist2.jsp?curage=<%=i1%>">尾页</a>
<%
}
%>
当在首页或者尾页时,相应的按钮就被写成了普通的<span>链接,也就是没法点击
跳转按钮应该和上面的if语句搭配着看,这样我们就得到了能分页的界面。
全部代码:
<%@ page import="java.util.List" %>
<%@ page import="mod.user" %>
<%@ page import="dao.UserDao" %>
<%@ page import="dao.tools" %>
<%@ page import="java.io.InputStream" %>
<%@ page import="org.apache.ibatis.session.SqlSessionFactory" %>
<%@ page import="org.apache.ibatis.session.SqlSession" %>
<%@ page import="org.apache.ibatis.io.Resources" %>
<%@ page import="org.apache.ibatis.session.SqlSessionFactoryBuilder" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>学生管理系统</title>
<style>
body { font-family: '微软雅黑'; background-color: #e0f7fa; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; margin-top: 150px;}
.container { background-color: #ffffff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 90%; max-width: 800px; text-align: center; }
h1 { color: #00796b; margin-bottom: 20px; }
.btn { display: block; width: 100%; padding: 12px; margin: 10px 0; font-size: 18px; color: #ffffff; background-color: #00796b; border: none; border-radius: 6px; cursor: pointer; }
.btn:hover { background-color: #004d40; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
th { background-color: #e0f7fa; color: black; }
tr:nth-child(even) { background-color: lightyellow; }
tr:hover { background-color: #e0f7fa; }
</style>
</head>
<body>
<%
InputStream in = Resources.getResourceAsStream("mybatis-config.xml");
SqlSessionFactory factory = new SqlSessionFactoryBuilder().build(in);
SqlSession sqlSession = factory.openSession();
UserDao userDao = sqlSession.getMapper(UserDao.class);
List<user> all = userDao.findall();
// List<user> all = (List<user>) request.getAttribute("all");
//1、设定每一页的记录数
int pageSize=3;
//2、计算总的记录数
int size = all.size();
//3、分页总数
// int i1 = size/ pageSize;
int i1=(size% pageSize==0?(size/ pageSize):(size/ pageSize+1));
//4、初始化当前页
int curage = 1;
if (request.getParameter("curage") == null) {
curage = 1;
} else {
curage= Integer.valueOf(request.getParameter("curage"));
}
int offset = (curage - 1) * pageSize; // 计算偏移量
// int limit = pageSize; // 限制数量
//构建sql语句查询当前页的记录数
// String sql="select * from stu limit "+offset+", "+limit;
//6、获取当前页数据
List<user> findye = userDao.findye(offset,pageSize);
%>
<div class='container'>
<h1>学生信息管理</h1>
<div><a href='insertStudent.jsp'>添加信息</a></div>
<table>
<tr><th>id</th><th>姓名</th><th>性别</th><th>年龄</th><th>操作一</th><th>操作二</th></tr>
<%
for (int i = 0; i <findye.size() ; i++) {
%>
<tr>
<td><%=findye.get(i).getID()%></td>
<td><%=findye.get(i).getName()%></td>
<td><%=findye.get(i).getSex()%></td>
<td><%=findye.get(i).getAge()%></td>
<td><a onclick=if(confirm('确定删除吗?'))return true; return false; href=delok?id=<%=findye.get(i).getID()%>>删除</a></td>
<td><a href=update.jsp?id=<%=findye.get(i).getID()%>>更新</a></td>
<%-- <a onclick=\"if(confirm('确定删除吗?')) return true; return false;\" href=delone?id="+findye.get(i).getId()+">删除</a>--%>
</tr>
<%
}
%>
</table>
<%
if(curage==1){
%>
<span>首页</span>
<span>上一页</span>
<a href="shoulist2.jsp?curage=<%=curage+1%>">下一页</a>
<a href="shoulist2.jsp?curage=<%=i1%>">尾页</a>
<%
}else if (curage==i1){
%>
<a href="shoulist2.jsp?curage=1">首页</a>
<a href="shoulist2.jsp?curage=<%=curage-1%>">上一页</a>
<span>下一页</span>
<span>尾页</span>
<%
}else{
%>
<a href="shoulist2.jsp?curage=1">首页</a>
<a href="shoulist2.jsp?curage=<%=curage-1%>">上一页</a>
<a href="shoulist2.jsp?curage=<%=curage+1%>">下一页</a>
<a href="shoulist2.jsp?curage=<%=i1%>">尾页</a>
<%
}
%>
</div>
</body>
</html>
界面展示: