三天的功夫,零零散散三天的功夫,就做了个渣分页,真心感概战斗力差不多只有5,还尼玛是负分。一个小bug都懒得去解决了。
这次是运用jsp和servlet一起做的。刚接触servlet,确实感觉到他的好处了,相比之前jsp页面中存在大量java代码,两者联合起来,jsp页面中看起都舒服些。
做个分页总结起来:获取当前页数、获取查询结果显示总页数、获取查询结果总行数、每次查询结果行数等,这些都是比较关键的点,得拿下,得会用。
把查询条件、显示部分都放在一个表单里,这样通过action提交表单时,相关条件都不会遗漏。action即提交到servlet中。在这个java类里进行对数据库的相关操作。并通过request
保存相应结果,然后转发回原jsp页面。在jsp页面中通过EL表达式,显示相应结果。
1 <%@ page language="java" import="java.util.*,impl.*,dao.*,entity.*" 2 pageEncoding="UTF-8"%> 3 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <title>无标题文档</title> 9 <script type="text/javascript"> 10 11 </script> 12 </head> 13 14 <body onload="loadForm()"> 15 16 <form id="form1" name="form1" method="post" action="EmpListAction" 17 onsubmit="return checkDate()"> 18 <p> 19 <label> 20 员工姓名 21 <input type="text" name="ename" id="textfield" 22 value="${param.ename}" /> 23 </label> 24 <label> 25 雇用起始时间 26 <input type="text" name="startdate" id="startdate" 27 value="${param.startdate}" /> 28 </label> 29 <label></label> 30 至 31 <input type="text" name="enddate" id="enddate" 32 value="${param.enddate}" /> 33 <label> 34 部门 35 <select name="dept" id="select" onchange="selectIndex1()"> 36 <option value="0"> 37 请选择部门 38 </option> 39 <% 40 DeptDao deptDao=new DeptDaoImpl(); 41 List<Dept> deptList=deptDao.showDept(); 42 request.setAttribute("deptList",deptList); 43 %> 44 <c:forEach var="dept" items="${deptList}" varStatus="cc"> 45 <option value="${dept.deptno}"> 46 ${dept.dname} 47 </option> 48 49 <c:if test="${deptNo==dept.deptno}"> 50 51 </c:if> 52 53 </c:forEach> 54 55 </select> 56 <input type="hidden" id="select1" name="select1" value="" /> 57 </label> 58 <label> 59 <input type="submit" onclick="subForm1()" name="subForm" 60 id="subForm" value="查询" /> 61 </label> 62 </p> 63 64 <%--隐藏域--%> 65 <input type="hidden" id="pageSize" name="pageSize" value="${curPage}" /> 66 67 <table width="1196" border="1"> 68 <tr> 69 <td width="509"> 70 <div align="center"> 71 员工姓名(ENAME) 72 </div> 73 </td> 74 <td width="147"> 75 <div align="center"> 76 sal 77 </div> 78 </td> 79 <td width="282"> 80 <div align="center"> 81 hiredate 82 </div> 83 </td> 84 <td width="139"> 85 <div align="center"> 86 mgr 87 </div> 88 </td> 89 <td width="97"> 90 <div align="center"> 91 部门名称 92 </div> 93 </td> 94 </tr> 95 96 97 <c:forEach var="emp" items="${requestScope.list}" varStatus="status"> 98 <tr> 99 <td> 100 ${emp.ename} 101 </td> 102 <td> 103 ${emp.sal} 104 </td> 105 <td> 106 ${emp.hiredate} 107 </td> 108 <td> 109 ${emp.mgr} 110 </td> 111 <td> 112 ${emp.deptno} 113 </td> 114 </tr> 115 </c:forEach> 116 117 </table> 118 当前页数:[${curPage}/${totalSize}] 页 119 <a href="javascript:goCount(1)">首页</a> 120 121 <c:choose> 122 <c:when test="${curPage >1}"> 123 <a href="javascript:goCount(${curPage-1})">上一页</a> 124 </c:when> 125 <c:otherwise>上一页</c:otherwise> 126 </c:choose> 127 <!--循环遍历所有页码 --> 128 <c:forEach var="page" items="${requestScope.pageArr}" varStatus="c"> 129 <c:if test="${page!=0}"> 130 <a href="javascript:goCount(${page})">${page }</a> 131 </c:if> 132 </c:forEach> 133 134 <c:if test="${curPage <totalSize}" var="test"> 135 <a href="javascript:goCount(${curPage+1})">下一页</a> 136 </c:if> 137 138 <a href="javascript:goCount(${totalSize})">尾页</a> 139 <input type="text" id="inputCount" style=" 30px" /> 140 <input type="button" onclick="goCount1()" value="确定" /> 141 <br /> 142 </form> 143 144 <script type="text/javascript"> 145 146 //检查隐藏域下框,根据值,显示下拉框 147 // function showSelect(){ 148 // var selects=document.getElementById("select"); 149 // var selectNum="${select2}"; //获取上次点击的下拉框索引 150 // if(selectNum!=""&&selectNum!=null){ 151 // document.getElementById("select").selectedIndex=selectNum; 152 // document.getElementById("select1").value=selectNum; 153 154 //} 155 //} 156 157 //加载页面,默认提交表单 158 function loadForm(){ 159 //document.getElementById("form1").submit(); 160 location.herf="EmpListAction.java"; 161 } 162 163 function showSelect(){ 164 var selects=document.getElementById("select"); 165 for(var i=0;i<selects.length;i++){ 166 if(select[i].value=="${param.dept}"){ 167 select[i].selected=true; 168 } 169 } 170 } 171 172 //使用隐藏域保存下拉框的值 173 function selectIndex1(){ 174 var select=document.getElementById("select"); 175 document.getElementById("select1").value=select.selectedIndex; 176 //alert(document.getElementById("select1").value+"input"); 177 } 178 179 使用JS提交表单 180 function goCount(pageSize1){ 181 document.getElementById("pageSize").value=pageSize1;//讲当前页码保存到一个隐藏域中 182 //alert(document.getElementById("pageSize").value+"value"); 183 document.getElementById("form1").submit(); 184 } 185 186 function subForm1(){ 187 document.getElementById("pageSize").value=1; 188 } 189 190 function goCount1(){ 191 var inputCount=document.getElementById("inputCount"); 192 var reg=/^\d+$/; 193 if(inputCount.value==""){ 194 alert("请输入跳转的页码"); 195 }else if(reg.test(inputCount.value)==false||inputCount.value<1||inputCount.value>"${totalSize}"){ 196 alert("请输入范围内数字"); 197 }else{ 198 document.getElementById("pageSize").value=inputCount.value; 199 form1.submit(); 200 } 201 } 202 203 <%--检查输入日期--%> 204 function checkDate(){ 205 var flag=true; 206 var start=document.getElementById("startdate").value; 207 var end=document.getElementById("enddate").value; 208 <%--定义日期表达式 --%> 209 var regDate=/^(19[8-9]\d|20\d{2})-(0?[1-9]|1[0-2])-(0?[1-9]|[12]\d|3[01])$/; 210 if(start!=null&&start.length>0){ 211 if(regDate.test(start)==false){ 212 flag=false; 213 } 214 } 215 if(end!=null&&end.length>0){ 216 if(regDate.test(end)==false){ 217 flag=false; 218 } 219 } 220 if(!flag){ 221 alert("日期格式错误,正确格式为:19XX-XX-XX或者20XX-XX-XX"); 222 } 223 return flag; 224 } 225 </script> 226 </body> 227 228 229 </html>