02_分页_02_步步优化
【缺点一 : 总记录数过多，页码条冗长】
如果页数过多，将数据库中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.改变记录每行的颜色，方便识别，在鼠标停留在某一行数据时，又会出现另外一种颜色。
至此，分页基本的功能都已经完。后期有空可以再做优化。
