• 首次做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=" 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>
  • 相关阅读:
    单例设计模式
    程序员眼中的中国传统文化王阳明《传习录》10
    程序员眼中的中国传统文化王阳明《传习录》8
    程序员眼中的中国传统文化王阳明《传习录》16
    程序员眼中的中国传统文化王阳明《传习录》11
    程序员眼中的中国传统文化王阳明《传习录》15
    程序员眼中的中国传统文化王阳明《传习录》14
    程序员眼中的中国传统文化王阳明《传习录》9
    程序员眼中的中国传统文化王阳明《传习录》13
    程序员眼中的中国传统文化王阳明《传习录》12
  • 原文地址:https://www.cnblogs.com/xiaona/p/3074548.html
Copyright © 2020-2023  润新知