还是老规矩，先看前端页面查看需要传递哪些参数，并且把逻辑有问题的部分进行修改~
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java"%>
<%@ page import="java.util.*"%>
<%@ page import="java.text.*"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>IMUT_BANK ATM WelCome!!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/loader-style.css">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link href="assets/css/icons-style.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/minus.png">
<!-- <style type="text/css">
a{
color: blue;
}
a: hover {
color: Red;
}
</style> -->
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div id="status"> </div>
</div>
<!-- TOP NAVBAR -->
<nav role="navigation" class="navbar navbar-static-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle" type="button">
<span class="entypo-menu"></span>
</button>
<button class="navbar-toggle toggle-menu-mobile toggle-left" type="button">
<span class="entypo-list-add"></span>
</button>
<div id="logo-mobile" class="visible-xs">
<h1>IMUT ATM<span>v2.2.7</span></h1>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<ul style="margin: 11px 0 0 9px;" role="menu" class="dropdown-menu dropdown-wrap">
</ul>
</li>
<li><a href="#"><i data-toggle="tooltip" data-placement="bottom" title="Help" style="font-size:20px;" class="icon-help tooltitle"></i></a>
</li>
</ul>
<div id="nt-title-container" class="navbar-left running-text visible-lg">
<ul id="digital-clock" class="digital">
<div id="time">
<script>
document.getElementById('time').innerHTML = new Date().toLocaleString()
+ ' 星期' + '日一二三四五六'.charAt(new Date().getDay());
setInterval(
"document.getElementById('time').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",
1000);
</script>
</div>
</ul>
<ul id="nt-title">
<li><i class="wi-day-lightning"></i>  北京 
<b>24°</b><i class="wi-Celsius"></i> ;
</li>
<li><i class="wi-day-lightning"></i>  上海 
<b>28°</b><i class="wi-Celsius"></i> ;
</li>
<li><i class="wi-day-lightning"></i>  内蒙古 
<b>26°</b><i class="wi-Celsius"></i> ;
</li>
<li><i class="wi-day-lightning"></i>  海南 
<b>31°</b><i class="wi-Celsius"></i> ;
</li>
<li><i class="wi-day-lightning"></i>  四川 
<b>29°</b><i class="wi-Celsius"></i> ;
</li>
</ul>
</div>
<ul style="margin-right:0;" class="nav navbar-nav navbar-right">
<li>
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<img alt="" class="admin-pic img-circle" src="http://api.randomuser.me/portraits/thumb/men/10.jpg">欢迎您 <b class="caret"></b>
</a>
<ul style="margin-top:14px;" role="menu" class="dropdown-setting dropdown-menu">
<li>
<a href="#">
<span class="entypo-user"></span>  我的账户</a>
</li>
<li>
<a href="#">
<span class="entypo-vcard"></span>  账户设置</a>
</li>
<li>
<a href="#">
<span class="entypo-lifebuoy"></span>  帮助</a>
</li>
<li class="divider"></li>
<li>
<a href="/changepage/login.jsp">
<span class="entypo-user"></span>   退出账户</a>
</li>
</ul>
</li>
<li>
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<span class="icon-gear"></span>  背景颜色</a>
<ul role="menu" class="dropdown-setting dropdown-menu">
<li class="theme-bg">
<div id="button-bg"></div>
<div id="button-bg2"></div>
<div id="button-bg3"></div>
<div id="button-bg5"></div>
<div id="button-bg6"></div>
<div id="button-bg7"></div>
<div id="button-bg8"></div>
<div id="button-bg9"></div>
<div id="button-bg10"></div>
<div id="button-bg11"></div>
<div id="button-bg12"></div>
<div id="button-bg13"></div>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- /END OF TOP NAVBAR -->
<!-- SIDE MENU -->
<div id="skin-select">
<div id="logo">
<h1>IMUT ATM<span>v2.2.7</span></h1>
</h1>
</div>
<a id="toggle">
<span class="entypo-menu"></span>
</a>
<div class="dark">
<form action="#">
<span>
<input type="text" name="search" value="" class="search rounded id_search" placeholder="Search Menu..." autofocus="">
</span>
</form>
</div>
<div class="search-hover">
<form id="demo-2">
<input type="search" placeholder="Search Menu..." class="id_search">
</form>
</div>
<div class="search-hover">
<form id="demo-2">
<input type="search" placeholder="Search Menu..." class="id_search">
</form>
</div>
<div class="skin-part">
<div id="tree-wrap">
<div class="side-bar">
<ul class="topnav menu-left-nest">
</ul>
<ul class="topnav menu-left-nest">
<li>
<a class="tooltip-tip2 ajax-load" href="/changepage/UserIndex.jsp" title="Profile Page">
<i class="icon-user"></i><span>用户信息</span></a>
</li>
<li>
<a class="tooltip-tip" href="/changepage/UserChangePwd.jsp" title="Extra Pages">
<i class="icon-lock"></i>
<span>修改密码</span>
</a>
<li>
<a class="tooltip-tip2 ajax-load" href="/UserSerch" title="Blank Page">
<i class="icon-media-record"></i><span>查询余额</span></a>
</li>
<li>
<a class="tooltip-tip2 ajax-load" href="/changepage/UserStore.jsp" title="Invoice">
<i class="entypo-newspaper"></i><span>存款</span></a>
</li>
<li>
<a class="tooltip-tip2 ajax-load" href="/changepage/UserFetch.jsp" title="Pricing Table">
<i class="fontawesome-money"></i><span>取款</span></a>
</li>
<li>
<a class="tooltip-tip2 ajax-load" href="/changepage/UserTransfer.jsp" title="Time Line">
<i class="entypo-clock"></i><span>转账</span></a>
</li>
<li>
<a class="tooltip-tip2" href="/serchDetaile" title="404 Error Page">
<i class="icon-preview"></i><span>交易明细</span></a>
</li>
<li>
<a class="tooltip-tip2" href="/changepage/login.jsp" title="login.jsp">
<i class="icon-mail"></i><span>退卡</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END OF SIDE MENU -->
<!-- PAPER WRAP -->
<div class="wrap-fluid">
<div class="container-fluid paper-wrap bevel tlbr">
<!--/ TITLE -->
<!-- BREADCRUMB -->
<ul id="breadcrumb">
<li>
<span class="entypo-home"></span>
</li>
<li><i class="fa fa-lg fa-angle-right"></i>
</li>
<li><a href="#" title="Sample page 1">首页</a>
</li>
<li><i class="fa fa-lg fa-angle-right"></i>
</li>
<li><a href="#" title="Sample page 1">交易明细</a>
</li>
</ul>
<!-- END OF BREADCRUMB -->
<div class="content-wrap">
<div class="row">
<div class="col-sm-12">
<!-- BLANK PAGE-->
<h2 align="center"><b>IMUT BANK借记卡明细对账单</b></h2>
<%
SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//设置日期格式
request.setAttribute("date_time", df.format(new Date()));
%>
<h4 align="center">打印日期:${date_time }</h4>
<div class="body-nest" id="Blank_Page_Content">
<div class="form_center">
</table> <table width="90%" border='2'>
<tr align="center">
<br><br>
<th><font size="4"> 卡 号 </font></th>
<th><font size="4"> 日 期 </font></th>
<th><font size="4"> 货 币 </font></th>
<th><font size="4"> 交 易 金 额 </font></th>
<th><font size="4"> 账 户 余 额 </font></th>
</tr>
<c:forEach items="${pageBean.list }" var="user">
<tr>
<td>${user.icno }</td>
<td>${user.rm_date }</td>
<td>${user.rm_currency }</td>
<td>${user.rm_balance }</td>
<td>${user.rm_rest }</td>
</tr>
</c:forEach>
</table>
</div>
</div>
</div>
</div>
<!-- END OF BLANK PAGE -->
</div>
<%-- ${requestScope.pageBean.pageNum == 1} --%>
<!-- <input hidden="true" name="pageNum" value="1"/> -->
<%-- <c:if test="${pageBean.pageNum==0}">
${pageContext.request.contextPath}/serchDetaile?pageNum=1
</c:if> --%>
<div align="center">
<br/>
<br/>
<br/>
<!-- ---------------------------------------------------------------------------------------------------------- -->
<%-- 构建分页导航 --%>
<p style="font-size:20px; color:gray">共有${pageBean.totalRecord}条数据，共${pageBean.totalPage}页，当前为${pageBean.pageNum}页</p>
<br/>
<div style="font-size: 17px; color: black">
<a href="${pageContext.request.contextPath}/serchDetaile?pageNum=1" style="font-color: green">首页</a>
<%--如果当前页为第一页时，就没有上一页这个超链接显示 --%>
<c:if test="${pageBean.pageNum ==1}">
<c:forEach begin="${pageBean.start}" end="${pageBean.end}" step="1" var="i">
<c:if test="${pageBean.pageNum == i}">
${i}
</c:if>
<c:if test="${pageBean.pageNum != i}">
<a href="${pageContext.request.contextPath}/serchDetaile?pageNum=${i}">${i}</a>
</c:if>
</c:forEach>
<a href="${pageContext.request.contextPath}/serchDetaile?pageNum=${pageBean.pageNum+1}">下一页</a>
</c:if>
<%--如果当前页不是第一页也不是最后一页，则有上一页和下一页这个超链接显示 --%>
<c:if test="${pageBean.pageNum > 1 && pageBean.pageNum < pageBean.totalPage}">
<a href="${pageContext.request.contextPath}/serchDetaile?pageNum=${pageBean.pageNum-1}">上一页</a>
<c:forEach begin="${pageBean.start}" end="${pageBean.end}" step="1" var="i">
<c:if test="${pageBean.pageNum == i}">
${i}
</c:if>
<c:if test="${pageBean.pageNum != i}">
<a href="${pageContext.request.contextPath}/serchDetaile?pageNum=${i}">${i}</a>
</c:if>
</c:forEach>
<a href="${pageContext.request.contextPath}/serchDetaile?pageNum=${pageBean.pageNum+1}">下一页</a>
</c:if>
<%-- 如果当前页是最后一页，则只有上一页这个超链接显示，下一页没有 --%>
<c:if test="${pageBean.pageNum!=1 &&pageBean.pageNum == pageBean.totalPage}">
<a href="${pageContext.request.contextPath}/serchDetaile?pageNum=${pageBean.pageNum-1}">上一页</a>
<c:forEach begin="${pageBean.start}" end="${pageBean.end}" step="1" var="i">
<c:if test="${pageBean.pageNum == i}">
${i}
</c:if>
<c:if test="${pageBean.pageNum != i}">
<a href="${pageContext.request.contextPath}/serchDetaile?pageNum=${i}">${i}</a>
</c:if>
</c:forEach>
</c:if>
<%--尾页 --%>
<a href="${pageContext.request.contextPath}/serchDetaile?pageNum=${pageBean.totalPage}">尾页</a>
</div>
<!-- /END OF CONTENT -->
<!-- ---------------------------------------------------------------------------------------------------------------- -->
</div>
<!-- FOOTER -->
<div class="footer-space"></div>
<div id="footer">
<div class="devider-footer-left"></div>
<div class="time">
<p id="spanDate">
<p id="clock">
</div>
<div class="copyright">本网站基于百度查询开发 <a href="http://www.baidu.com/" title="百度" target="_blank">百度</a> All Rights Reserved</div>
<div class="devider-footer"></div>
</div>
<!-- / END OF FOOTER -->
</div>
</div>
<!-- END OF PAPER WRAP -->
<!-- RIGHT SLIDER CONTENT -->
<div class="sb-slidebar sb-right">
<div class="right-wrapper">
<div class="row">
<h3>
<span><i class="entypo-gauge"></i> MAIN WIDGET</span>
</h3>
<div class="col-sm-12">
<div class="widget-knob">
<span class="chart" style="position:relative" data-percent="86">
<span class="percent"></span>
</span>
</div>
<div class="widget-def">
<b>Distance traveled</b>
<br>
<i>86% to the check point</i>
</div>
<div class="widget-knob">
<span class="speed-car" style="position:relative" data-percent="60">
<span class="percent2"></span>
</span>
</div>
<div class="widget-def">
<b>The average speed</b>
<br>
<i>30KM/h avarage speed</i>
</div>
<div class="widget-knob">
<span class="overall" style="position:relative" data-percent="25">
<span class="percent3"></span>
</span>
</div>
<div class="widget-def">
<b>Overall result</b>
<br>
<i>30KM/h avarage Result</i>
</div>
</div>
</div>
</div>
<div style="margin-top:0;" class="right-wrapper">
<div class="row">
<h3>
<span><i class="entypo-chat"></i> CHAT</span>
</h3>
<div class="col-sm-12">
<span class="label label-warning label-chat">Online</span>
<ul class="chat">
<li>
<a href="#">
<span>
<img alt="" class="img-chat img-circle" src="http://api.randomuser.me/portraits/thumb/men/20.jpg">
</span><b>Dave Junior</b>
<br><i>Last seen : 08:00 PM</i>
</a>
</li>
<li>
<a href="#">
<span>
<img alt="" class="img-chat img-circle" src="http://api.randomuser.me/portraits/thumb/men/21.jpg">
</span><b>Kenneth Lucas</b>
<br><i>Last seen : 07:21 PM</i>
</a>
</li>
<li>
<a href="#">
<span>
<img alt="" class="img-chat img-circle" src="http://api.randomuser.me/portraits/thumb/men/22.jpg">
</span><b>Heidi Perez</b>
<br><i>Last seen : 05:43 PM</i>
</a>
</li>
</ul>
<span class="label label-chat">Offline</span>
<ul class="chat">
<li>
<a href="#">
<span>
<img alt="" class="img-chat img-offline img-circle" src="http://api.randomuser.me/portraits/thumb/men/23.jpg">
</span><b>Dave Junior</b>
<br><i>Last seen : 08:00 PM</i>
</a>
</li>
<li>
<a href="#">
<span>
<img alt="" class="img-chat img-offline img-circle" src="http://api.randomuser.me/portraits/thumb/women/24.jpg">
</span><b>Kenneth Lucas</b>
<br><i>Last seen : 07:21 PM</i>
</a>
</li>
<li>
<a href="#">
<span>
<img alt="" class="img-chat img-offline img-circle" src="http://api.randomuser.me/portraits/thumb/men/25.jpg">
</span><b>Heidi Perez</b>
<br><i>Last seen : 05:43 PM</i>
</a>
</li>
<li>
<a href="#">
<span>
<img alt="" class="img-chat img-offline img-circle" src="http://api.randomuser.me/portraits/thumb/women/25.jpg">
</span><b>Kenneth Lucas</b>
<br><i>Last seen : 07:21 PM</i>
</a>
</li>
<li>
<a href="#">
<span>
<img alt="" class="img-chat img-offline img-circle" src="http://api.randomuser.me/portraits/thumb/men/26.jpg">
</span><b>Heidi Perez</b>
<br><i>Last seen : 05:43 PM</i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END OF RIGHT SLIDER CONTENT-->
<!-- MAIN EFFECT -->
<script type="text/javascript" src="assets/js/preloader.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/load.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
</div></body>
</html>
创建一个PageBean对象，封装这些数据：
package com.atm.pojo;
import java.util.List;
public class PageBean<T> {
private int pageNum;//当前页页码，从请求传过来
private int pageSize; //每页显示的数据条数
private int totalRecord;//总的记录条数，查询数据库得到的数据
//需要计算得来
private int totalPage; //总页数 通过总条数和每页显示多少条计算得来
private int startIndex;//从哪开始拿
//把每页要显示的数据放集合里
private List<T> list;
//分页显示的页数 1-5中的1和5
private int start;
private int end;
public int getPageNum() {
return pageNum;
}
public void setPageNum(int pageNum) {
this.pageNum = pageNum;
}
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;
}
public int getStartIndex() {
return startIndex;
}
public void setStartIndex(int startIndex) {
this.startIndex = startIndex;
}
public List<T> getList() {
return list;
}
public void setList(List<T> list) {
this.list = list;
}
public int getStart() {
return start;
}
public void setStart(int start) {
this.start = start;
}
public int getEnd() {
return end;
}
public void setEnd(int end) {
this.end = end;
}
public PageBean(int pageNum, int pageSize, int totalRecord){
this.pageNum=pageNum;
this.pageSize=pageSize;
this.totalRecord=totalRecord;
//totalpage 总页数
if(totalRecord%pageSize==0){
//说明整除，正好每页显示pagesize条数据
this.totalPage=totalRecord/pageSize;
}else{
//不整除，就要多加一页，显示多余的数据
this.totalPage=totalRecord/pageSize+1;
}
//开始索引
this.startIndex=(pageNum-1)*pageSize;
this.start=1;
this.end=5;
if(totalPage<=5){
this.end=this.totalPage;
}else{
this.start=pageNum-2;
this.end=pageNum+2;
if(start<=0){
//比如当前页是第一页，或者第二页，就不如和这个规则
this.start=1;
this.end=5;
}
if(end >=this.totalPage){
//比如当前页是倒数第二页或者最后一页，也同样不符合上面这个规则
this.end=totalPage;
this.start=end-4;
}
}
}
}
之前我们把查询交易明细的代码都写到Userservice中了，其实应该写到RunMessageService中，对应的数据层和实现类也是同样的操作~
然后对交易记录的Servlet进行修改，插入分页功能：
package com.atm.servlet;
import com.atm.pojo.PageBean;
import com.atm.pojo.RunMessage;
import com.atm.pojo.User;
import com.atm.service.RunMessageService;
import com.atm.service.UserService;
import com.atm.service.impl.RunMessageServiceImpl;
import com.atm.service.impl.UserServiceImpl;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.List;
//查询交易记录
@WebServlet("/serchDetaile")
public class SerchDetaileServlet extends HttpServlet {
private RunMessageService runMessageService=new RunMessageServiceImpl();
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
User user =(User)request.getSession().getAttribute("ua");
try {
//分页处理
//获得页码
String pageNum=request.getParameter("pageNum");
int page=1;
if(pageNum!=null){
page=Integer.parseInt(pageNum);
}
//每页显示的条数
int pagesize=5;
//计算分页的总条数
int totalRecord= runMessageService.countRunmessage(user.getIcno());
//封装pagebean对象
PageBean<RunMessage> pageBean=new PageBean<>(page,pagesize,totalRecord);
//查询当前页的数据，并设置到pageBean中返回
List<RunMessage> lists =runMessageService.findRunMessageByPage(user.getIcno(),page,pagesize);
pageBean.setList(lists);
request.getSession().setAttribute("pageBean",pageBean);
response.sendRedirect("/changepage/UserDetaile.jsp");
} catch (Exception e) {
e.printStackTrace();
}
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
接口：
//查询交易记录总条数
public int countRunmessage(String icno) throws Exception{
return runMessageDao.countRunMessage(icno);
}
//查询当前页数据
public List<RunMessage> findRunMessageByPage(String icno,int page, int pagesize) throws Exception{
return runMessageDao.findRunMessageByPage(icno,page,pagesize);
}数据层：
//用户交易记录总条数
public int countRunMessage(String icno) throws Exception{
Connection connection=DBUtils.getConnection();
PreparedStatement preparedStatement = connection.prepareStatement("select count(1) from runmessage where icno=?");
preparedStatement.setString(1,icno);
ResultSet rs= preparedStatement.executeQuery();
int totalRecord=0;
if (rs.next()){
totalRecord=rs.getInt(1);
}
DBUtils.release(connection,preparedStatement,null);
return totalRecord;
}
//查询当前页的交易记录
public List<RunMessage> findRunMessageByPage(String icno,int page, int pagesize) throws Exception {
Connection connection=DBUtils.getConnection();
int startIndex =(page-1)*pagesize;
PreparedStatement preparedStatement = connection.prepareStatement("select * from runmessage where icno=? limit ?,?");
preparedStatement.setString(1,icno);
preparedStatement.setInt(2,startIndex);
preparedStatement.setInt(3,pagesize);
ResultSet rs= preparedStatement.executeQuery();
List<RunMessage> lists=new ArrayList<>();
while (rs.next()){
RunMessage runMessage=new RunMessage();
runMessage.setId(rs.getInt(1));
runMessage.setIcno(rs.getString(2));
runMessage.setRm_date(rs.getString(3));
runMessage.setRm_currency(rs.getString(4));
runMessage.setRm_balance(rs.getDouble(5));
runMessage.setRm_rest(rs.getDouble(6));
lists.add(runMessage);
}
DBUtils.release(connection,preparedStatement,null);
return lists;
}再随便添加几条数据方便测试效果：
重启一下系统，然后就发现功能实现啦！~
实现代码已上传~
![[面试官，你坐好]，今天我给你吹下卡顿监控](https://img-blog.csdnimg.cn/7b8ebb1464d54dd1babefb98459644e1.png)
