Loading

首次做jsp分页

   三天的功夫,零零散散三天的功夫,就做了个渣分页,真心感概战斗力差不多只有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="width: 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>

 

 

posted @ 2013-05-12 21:25  Mr.Er  阅读(548)  评论(0编辑  收藏  举报