zoukankan      html  css  js  c++  java
  • jsp自定义标签分页

    第一步:建立分页实体page类

     1 package com.soda.util;
     2 /**
     3  * @description 分页实体类
     4  * @author line
     5  * @time   2016年8月28日11:16:50
     6  */
     7 public class Page {
     8     private int pageSize;//每页记录per
     9     private int totalSize;//总记录total
    10     private int currentPage;//当前页page
    11     private int totalPage;//总页数lastpage
    12     private String url;//要链接的sevlet
    13     public Page() {
    14         // TODO Auto-generated constructor stub
    15     }
    16     public Page(int pageSize, int totalSize, int currentPage, int totalPage,
    17             String url) {
    18         super();
    19         this.pageSize = pageSize;
    20         this.totalSize = totalSize;
    21         this.currentPage = currentPage;
    22         this.totalPage = totalPage;
    23         this.url = url;
    24     }
    25     public int getPageSize() {
    26         return pageSize;
    27     }
    28     public void setPageSize(int pageSize) {
    29         this.pageSize = pageSize;
    30     }
    31     public int getTotalSize() {
    32         return totalSize;
    33     }
    34     public void setTotalSize(int totalSize) {
    35         this.totalSize = totalSize;
    36     }
    37     public int getCurrentPage() {
    38         return currentPage;
    39     }
    40     public void setCurrentPage(int currentPage) {
    41         if (currentPage<=0) {
    42             this.currentPage=1;
    43         }else if(totalPage<=0){
    44             this.currentPage = currentPage;
    45         }else if (currentPage>=totalPage) {
    46             this.currentPage=totalPage;
    47         }else {
    48             this.currentPage = currentPage;
    49         }
    50     }
    51     public int getTotalPage() {
    52         return totalPage;
    53     }
    54     public void setTotalPage(int totalPage) {
    55         this.totalPage = totalPage;
    56     }
    57     public String getUrl() {
    58         return url;
    59     }
    60     public void setUrl(String url) {
    61         this.url = url;
    62     }
    63     
    64 }

    第二步:建立分页标签类PageTag(页码样式自己可以更改)

      1 package com.soda.util;
      2 
      3 import java.io.IOException;
      4 
      5 import javax.servlet.jsp.JspException;
      6 import javax.servlet.jsp.JspWriter;
      7 import javax.servlet.jsp.PageContext;
      8 import javax.servlet.jsp.tagext.Tag;
      9 import javax.servlet.jsp.tagext.TagSupport;
     10 
     11 @SuppressWarnings("serial")
     12 public class PageTag extends TagSupport {
     13     private Page pi;// 持有页码对象的引用
     14 
     15     public Page getPi() {
     16         return pi;
     17     }
     18 
     19     public void setPi(Page pi) {
     20         this.pi = pi;
     21     }
     22 
     23     @Override
     24     public int doStartTag() throws JspException {
     25         StringBuffer txt = new StringBuffer();
     26         if (pi.getTotalSize() < 1) {
     27             PageContext pc = this.pageContext;
     28             JspWriter out = pc.getOut();
     29             txt.append("<br/><div style='font-size:25px;text-align: center'>暂无查询结果</div>");
     30             try {
     31                 out.append(txt.toString());
     32             } catch (IOException e) {
     33                 // TODO Auto-generated catch block
     34                 e.printStackTrace();
     35             }
     36         } else {
     37             txt.append("<form action='" + pi.getUrl() + "' method='post'>");
     38             txt.append("<table width='100%' border='0' cellspacing='0' cellpadding='0'>");
     39             txt.append("<tr>");
     40             txt.append("<td width='20%' height='25'>");
     41             txt.append("<table border='0' cellspacing='0' cellpadding='3'>");
     42             txt.append("<tr>");
     43             txt.append("<td style='60px'></td>");
     44 
     45             if (pi.getCurrentPage() == 1) {
     46                 txt.append("<td style='60px'><span>首页</span></td> ");
     47                 txt.append("<td style='60px'><span>上一页</span></td> ");
     48             } else {
     49                 txt.append("<td style='60px'><a href='" + pi.getUrl()
     50                         + "&currentPage=1'>首页</a></td> ");
     51                 txt.append("<td style='60px'><a href='" + pi.getUrl()
     52                         + "&currentPage=" + (pi.getCurrentPage() - 1)
     53                         + "'>上一页</a></td> ");
     54             }
     55             for (int i = 1; i <= pi.getTotalPage(); i++) {
     56                 if (pi.getCurrentPage() == i) {
     57                     txt.append("<td style='30px'>" + i + "</td>");
     58                     continue;
     59                 }
     60                 if (Math.abs(pi.getCurrentPage() - i) <= 3) {
     61                     txt.append("<td style='30px'><a href='" + pi.getUrl()
     62                             + "&currentPage=" + i + "'>" + i + "</a></td> ");
     63                     continue;
     64                 }
     65                 if (Math.abs(pi.getCurrentPage() - i) < 7) {
     66                     txt.append("<td style='30px'>.</td>");
     67                     continue;
     68                 }
     69             }
     70             if (pi.getCurrentPage() >= pi.getTotalPage()) {
     71                 txt.append("<td style='60px'><span>下一页</span></td>");
     72                 txt.append("<td style='60px'><span>尾页</span></td>");
     73             } else {
     74                 txt.append("<td style='60px'><a href='" + pi.getUrl()
     75                         + "&currentPage=" + (pi.getCurrentPage() + 1)
     76                         + "'>下一页</a></td>");
     77                 txt.append("<td style='60px'><a href='" + pi.getUrl()
     78                         + "&currentPage=" + pi.getTotalPage()
     79                         + "'>尾页</a></td> ");
     80             }
     81             txt.append("</tr></table></td>");
     82             txt.append("<td width='20%' align='center'><table border='0' cellspacing='0' cellpadding='3'>");
     83 
     84             txt.append("<tr>");
     85             txt.append("<td>");
     86             txt.append("<input type='image' src='houtai/images/next.gif' width='16' height='16' border='0' onclick='return tiao()'/>");
     87             txt.append("<td><input name='currentPage' size='3' id='cid' style='25;height:18'/>/页</td> ");
     88             txt.append("</tr></table></td>");
     89 
     90             txt.append(" <td width='20%' align='right'>共" + pi.getTotalSize()
     91                     + "条记录显示到" + pi.getCurrentPage() + "/" + pi.getTotalPage()
     92                     + "</td>");
     93             txt.append("</tr></table></form>");
     94             PageContext pc = this.pageContext;
     95             JspWriter out = pc.getOut();
     96             try {
     97                 out.print("<script> function tiao(){"
     98                         + "var id=document.getElementById('cid').value; "
     99                         + "if(id==null||id.length==0){"
    100                         + "alert('请输入页码'); return false;} " + "if(isNaN(id)){"
    101                         + "alert('请输入数字'); return false;} "
    102                         + "if(id.indexOf(' ')>=0){"
    103                         + "alert('页码不能是空或含有有空格!'); return false;}"
    104                         + "if(parseInt(id)<1||parseInt(id)>"
    105                         + pi.getTotalPage() + "){"
    106                         + "alert('您输入的页码不在页码范围之内!'); return false;}}"
    107                         + "</script>");
    108                 out.print("<style>a{text-decoration: none;} "
    109                         + "a:visited{color:#333333;}" + "</style>");
    110                 out.append(txt.toString());
    111 
    112             } catch (IOException e) {
    113                 // TODO Auto-generated catch block
    114                 e.printStackTrace();
    115             }
    116         }
    117         return Tag.EVAL_PAGE;
    118     }
    119 }

    第三步:建立分页标签pageTag.tld文件

     1 <?xml version="1.0" encoding="UTF-8" ?>
     2 <taglib xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     3     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee " version="2.1">
     4 
     5     <description>pageTag</description>
     6     <display-name>pageTag</display-name>
     7     <tlib-version>1.1</tlib-version>
     8     <short-name>PersonTag</short-name>
     9     <uri>http://page/PersonTag</uri>
    10 
    11     <tag>
    12         <name>page</name>
    13         <tag-class>com.soda.util.PageTag</tag-class>
    14         <body-content>empty</body-content>
    15         <attribute>
    16             <name>pi</name>
    17             <required>true</required>
    18             <rtexprvalue>true</rtexprvalue>
    19         </attribute>
    20     </tag>
    21 </taglib>

    第四步:jsp页面运用(页面顶部引入标签,页面底部引用标签)注意:是红色字体所在行

      1 <%@page import="com.soda.bean.User"%>
      2 <%@page import="com.soda.bean.UserCondition"%>
      3 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
      4 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
      5 <%@ taglib uri="http://page/PersonTag" prefix="page" %>
      6 <%
      7 String path = request.getContextPath();
      8 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
      9 %>
     10 
     11 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     12 <html>
     13 <head>
     14 
     15 <title></title>
     16 <link href="houtai/css/style.css" rel="stylesheet" type="text/css" />
     17 <script type="text/javascript" src="houtai/js/main.js"></script>
     18 <script type="text/javascript">
     19 var xmlhttp;
     20 var useid;
     21 function forbiduser(id){
     22     useid=id;
     23     var ss=document.getElementById("userStateId"+id).innerHTML;
     24     var s;
     25     var ustate;
     26     if(ss=="启用"){
     27          ustate=1;
     28         s="禁用";
     29     }else{
     30          ustate=0;
     31         s="启用";
     32     }
     33     if (confirm('是否'+s+'')){
     34         xmlhttp = new XMLHttpRequest();
     35         xmlhttp.onreadystatechange=res;
     36         xmlhttp.open("get", "<%=basePath%>UserServlet?method=forbiduser&useId="+id+"&useState="+ustate, true);
     37         xmlhttp.send(null);
     38     }
     39     
     40 }
     41 function res() {
     42     if(xmlhttp.readyState==4&&xmlhttp.status==200){
     43         var txt = xmlhttp.responseText;
     44         if(txt=="禁用"){
     45             document.getElementById("btstate"+useid).innerHTML="启用";
     46         document.getElementById("userStateId"+useid).innerHTML="禁用";
     47         }
     48         if(txt=="启用"){
     49             document.getElementById("btstate"+useid).innerHTML="禁用";
     50             document.getElementById("userStateId"+useid).innerHTML="启用";
     51         }
     52     }
     53 }
     54 //全选与反选
     55 window.onload = function(){
     56         document.getElementById("userids").onclick = function(){
     57             var flag = this.checked;
     58             var items = document.getElementsByName("items");
     59             for(var i = 0; i < items.length; i++){
     60                 items[i].checked = flag;
     61             }
     62         }
     63         var items = document.getElementsByName("items");
     64         for(var i = 0; i < items.length; i++){
     65             items[i].onclick = function(){
     66                 //记录有多少个 items 被选中了
     67                 var number = 0;
     68                 for(var j = 0; j < items.length; j++){
     69                     if(items[j].checked){
     70                         number++;
     71                     }
     72                 }
     73                 document.getElementById("userids").checked = (items.length == number);
     74             }
     75         }
     76     }
     77 </script>
     78 </head>
     79 <body><%-- <c:set value="${sessionScope.uc }" var="uu"></c:set> --%>
     80 <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="3">
     81   <tr>
     82     <td style="height:25px; background-color:#f3f3f3; font-weight:bold" valign="top">
     83     &nbsp;&nbsp;&nbsp;&nbsp;当前位置:
     84     <img src="houtai/images/arrow.gif" align="absmiddle">&nbsp;&nbsp;soda创业教育平台&nbsp;&nbsp;
     85     <img src="houtai/images/arrow.gif" align="absmiddle">&nbsp;&nbsp;后台管理&nbsp;&nbsp;
     86     <img src="houtai/images/arrow.gif" align="absmiddle">&nbsp;&nbsp;用户管理</td>
     87   </tr>
     88   <tr>
     89     <td style="height:34px; background-image:url(houtai/images/main_header.gif); border-bottom:1px solid #cfd8e0; padding:0px">
     90       <table width="100%" border="0" cellspacing="0" cellpadding="0">
     91         <tr>
     92           <td width="20" height="34"><img src="houtai/images/main_headerL.gif" width="20" height="34"></td>
     93           <td style="color:#90c8e8;"><img src="houtai/images/icon_card.gif" width="16" height="16" align="absmiddle">&nbsp;&nbsp;<strong>用户管理</strong></td>
     94           <td align="right" class="white" style="padding-right:20px"><a href="<%=basePath %>UserServlet?method=addlookrole" class="barBtn"><img src="houtai/images/5.png" align="absmiddle"> 新增</a> 
     95           <a href="javascript:history.go(-1);" class="barBtn" onClick="javascript:history.go(-1);"><img src="houtai/images/btn_left.gif" align="absmiddle"> 后退</a> 
     96           <a href="javascript:history.go(+1);" class="barBtn" onClick="javascript:history.go(+1);"><img src="houtai/images/btn_right.gif" align="absmiddle"> 前进</a> 
     97           <a href="javascript:history.go(0);" class="barBtn" onClick="javascript:history.go(0);"><img src="houtai/images/btn_refresh.gif" align="absmiddle"> 刷新</a></td>
     98         </tr>
     99     </table></td>
    100   </tr>
    101   <%
    102   UserCondition uc=(UserCondition)session.getAttribute("uc");
    103       if(uc==null){
    104           uc = new UserCondition("","",-1,-1);
    105       }
    106   %>
    107   
    108   <tr>
    109     <td style="height:30px; background-color:#bddbff; border-bottom:1px solid #cfd8e0;"><table width="100%" border="0" cellpadding="3" cellspacing="1" class="table1">
    110       <form action="<%=basePath %>UserServlet" method="post">
    111       <TR>
    112         <th width="10%" align="center">用户登录名</th>
    113         <td width="20%" class="BGCgray">
    114         <input type="text" name="conseluname" id="textfield" value="<%=uc.getUserLoginName()==null?"":uc.getUserLoginName()%>"></td>
    115         <th width="10%" align="center">真实姓名</th>
    116         <td width="20%" class="BGCgray">
    117         <input type="text" name="conselruname" id="textfield2" value="<%=uc.getUserRealName()==null?"":uc.getUserRealName()%>"></td>
    118         <th width="10%" align="center"><STRONG>状态</STRONG></th>
    119         <td width="20%" class="BGCgray">
    120         <select name="userState" id="select2">
    121           <option <%=uc.getUserState()==-1?"selected='selected'":""%> value="-1">全部</option>
    122           <option <%=uc.getUserState()==1?"selected='selected'":""%> value="1">启用</option>
    123           <option <%=uc.getUserState()==0?"selected='selected'":""%> value="0">禁用</option>
    124         </select></td>
    125         <th width="10%" align="center">
    126         <BUTTON style="HEIGHT:25px" onClick="javascript:if (confirm('查询数据?')) return true;else return false;">
    127         <img src="houtai/images/btn_search.gif" width="16" height="16" align="absmiddle"> 查询
    128         <input type="hidden" name="method" value="showuser">
    129         <input type="hidden" name="currentPage" value="1">
    130         </BUTTON></th>
    131         </TR>
    132         </form>
    133     </table></td>
    134   </tr>
    135   <tr>
    136     <td height="100%" valign="top">
    137     <div style="overflow:auto;height:100%; 100%">
    138       <table width="100%" border="0" cellpadding="3" cellspacing="1" class="table1">
    139         <TR>
    140           <th align="center"><input type="checkbox" name="checkbox" id="userids"></th>
    141           <th align="center">用户姓名</th>
    142           <th align="center">登录名</th>
    143           <th align="center">联系电话</th>
    144           <th align="center">地址</th>
    145           <th align="center">邮箱</th>
    146            <th align="center">状态</th>
    147           <th width="200" align="center">操作</th>
    148           </TR>
    149         <c:forEach items="${users }" var="user">
    150         <TR>
    151           <TD align="center"><input type="checkbox" name="items" id="checkbox2"></TD>
    152           <TD align="center">${user.useName }</TD>
    153           <TD align="center">${user.useLoginName }</TD>
    154           <TD align="center">${user.usePhone }</TD>
    155           <TD align="center">${user.useAddress }</TD>
    156           <TD align="center">${user.useEmail }</TD>
    157           <TD align="center" id="userStateId${user.useId }">${user.useState==1?"启用":"禁用" }</TD>
    158           <TD width="200" align="center">
    159           <BUTTON style="height:21px; font-size:12px" onClick="javascript:if (confirm('查看该信息?')){ location.href='<%=basePath %>UserServlet?method=lookinfo&useId=${user.useId }'; return true;}else return false;">查看
    160           </BUTTON> 
    161           <BUTTON style="height:21px; font-size:12px" onClick="javascript:if (confirm('编辑该信息?')){ location.href='<%=basePath %>UserServlet?method=editinfo&useId=${user.useId }'; return true;}else return false;">编辑
    162           </BUTTON> 
    163           <BUTTON style="height:21px; font-size:12px" id="fid" onclick="forbiduser(${user.useId})"><span id="btstate${user.useId }">${user.useState==1?"禁用":"启用" }</span>
    164           </BUTTON> 
    165           <BUTTON style="height:21px; font-size:12px" onClick="javascript:if (confirm('删除该信息?')){ location.href='<%=basePath %>UserServlet?method=deleteinfo&useId=${user.useId }'; return true;}else return false;">删除
    166           </BUTTON>
    167           </TD>
    168         </TR>
    169         </c:forEach>
    170       </table>
    171       <page:page pi="${page }"/>
    172 </body>
    173 </html>

    第六步:这里省略sevlet代码,分页标签实体类中的URL在servlet中设置。

    csdn:https://blog.csdn.net/lzxlfly
  • 相关阅读:
    Ajax在表单中的应用
    jQuery实例
    Ajax之404,200等查询
    Ajax知识总结
    Ajax之eval()函数
    闭包应用
    全局预处理与执行,作用域与作用域链
    替换富文本里的px为rem
    vue2 兼容ie8
    vue-awesome-swiper 水平滚动异常
  • 原文地址:https://www.cnblogs.com/lzxlfly/p/5879463.html
Copyright © 2011-2022 走看看