【缺点一 : 总记录数过多，页码条冗长】
如果页数过多，将数据库中user表的数据增加到500多条，
会出现以下情况：
所以要在页面展示的数据数量做一个限制，优化成如百度的这样限制10条页码数。
【优化】
修改【PageBean.java】中的【getPageBar()方法】
public int[] getPagebar() {
int pagebar[] =new int[10]; //限制每页显示10条页码数
int startpage; //页面展示的起始页码数
int endpage; //页面展示的结束页码数
if(this.totalpage<=10){ //如果总页数本身就<=10，无需优化
startpage=1;
endpage=this.totalpage;
}else{ //总页数大于10
startpage=this.currentpage-4;
endpage=this.currentpage+5; //1 2 3 4 X 5 6 7 8 9 10
if(startpage<1){ //假如当前页为2，currentpage-4会导致startpage=-2
startpage=1;
endpage=10;
}
if(endpage>this.totalpage){//假如总页数为30，当前页为28，currentpage+5会导致endpage=33
endpage=this.totalpage;
startpage=endpage-9;
}
}
int index=0;
for(int i=startpage;i<=endpage;i++){
pagebar[index++]=i;
}
this.pagebar = pagebar;
return this.pagebar;
}
【运行结果】
【缺点二：页码条，当前页的颜色应该不同（比如变为红色），且不应该有当前页的超链接】
这里的优化在listUser.jsp中，优化的代码如下：
【listUser.jsp】
<a href="javascript:void(0)" onclick="gotopage(${pageBean.previouspage})">上一页</a>
<c:forEach var="pagenum" items="${pageBean.pagebar}">
<!--优化代码，即加一个判断即可-> <!-- 如果是当前页码，不显示超链接，并把颜色变为红色 -->
<c:if test="${pagenum==pageBean.currentpage }">
<font color="red">${pagenum}</font>
</c:if>
<!-- 如果不是当前页码，显示超链接，颜色默认 -->
<c:if test="${pagenum!=pageBean.currentpage }">
<a href="javascript:void(0)" onclick="gotopage(${pagenum})">${pagenum} </a>
</c:if>
</c:forEach>
<a href="javascript:void(0)" onclick="gotopage(${pageBean.nextpage})">下一页</a>
【运行结果】
【最后优化】
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>listUser</title>
<style type="text/css">
.even{background-color:#C0C0C0 }
.odd{background-color:#A08080 }
tr:hover{background-color:#FF99FF }
</style>
</head>
<body style="text-align:center;">
<table frame="border" width="85%">
<tr>
<td>客户姓名</td>
<td>性别</td>
<td>手机</td>
<td>邮箱</td>
<tr>
<c:forEach var="c" items="${requestScope.pageBean.list}" varStatus="status">
<!-- 每行数据的颜色样式不同，当鼠标在某一行的时候的颜色也会有变化 -->
<tr class="${status.count%2==0?‘even‘:‘odd‘ }">
<td>${c.name }</td>
<td>${c.sex }</td>
<td>${c.phone }</td>
<td>${c.email }</td>
</tr>
</c:forEach>
</table>
<br>
<script type="text/javascript">
function gotopage(currentpage){
//当在GO前的输入框输入的值或者点击上一页下一页等情况的数值 小于1、不是合理的数字、大于最大的页码 等情况，提示"请输入有效值"，且不做处理
if(currentpage<1 || currentpage!=parseInt(currentpage) || currentpage>${pageBean.totalpage}){
alert("请输入有效值！ ")
document.getElementById("pagenum").value=‘‘;
}else{
//获取pagesize的值，方便后面保持对应的每页的记录数
var pagesize=document.getElementById("pagesize").value;
window.location.href=‘${pageContext.request.contextPath}/ListUserServlet?currentpage=‘+currentpage+‘&pagesize=‘+pagesize;
}
}
//当在"每页[X]条"中输入数值，失去焦点时
function changesize(pagesize,oldvalue){
//当输入的"每页[X]条"的数值小于等于0 或者不是合理的数字
if(pagesize<=0 || pagesize!=parseInt(pagesize)){
alert("请输入合法值！ ");
document.getElementById("pagesize").value=oldvalue;
}else{
window.location.href=‘${pageContext.request.contextPath}/ListUserServlet?pagesize=‘+pagesize;
}
}
</script>
共[${pageBean.totalrecord }]条记录,
<!-- 在每页[]条 中输入对应的合法数字，就会将参数传递给 changesize(this.value,${pageBean.pagesize})方法-->
每页<input type="text" id="pagesize" value="${pageBean.pagesize }" onchange="changesize(this.value,${pageBean.pagesize})" style="width: 30px" maxlength="2">条,
共[${pageBean.totalpage }]页,
当前[${pageBean.currentpage }]页
<a href="javascript:void(0)" onclick="gotopage(${pageBean.previouspage})">上一页</a>
<c:forEach var="pagenum" items="${pageBean.pagebar}">
<!-- 如果是当前页码，不显示超链接，并把颜色变为红色 -->
<c:if test="${pagenum==pageBean.currentpage }">
<font color="red">${pagenum}</font>
</c:if>
<!-- 如果不是当前页码，显示超链接，颜色默认 -->
<c:if test="${pagenum!=pageBean.currentpage }">
<a href="javascript:void(0)" onclick="gotopage(${pagenum})">${pagenum} </a>
</c:if>
</c:forEach>
<a href="javascript:void(0)" onclick="gotopage(${pageBean.nextpage})">下一页</a>
<!-- 增加一个" [ ]GO " 输入页码，点击go进入对应的页码 -->
<input type="text" id="pagenum" style="width: 30px"/>
<input type="button" value=" GO " onclick="gotopage(document.getElementById(‘pagenum‘).value)"/>
</body>
</html>
【运行结果】
最后优化增加了三个功能：
1.改变每页显示的记录数"每页[]条"，这里输入合法的数值，就会改变当前显示的记录数目。
2.添加了跳转功能，在"[] GO"中输入对应的合法数值，点击"GO"就会跳转至对应的页码。
3.改变记录每行的颜色，方便识别，在鼠标停留在某一行数据时，又会出现另外一种颜色。
至此，分页基本的功能都已经完。后期有空可以再做优化。
时间： 2024-08-07 12:07:50