分页代码及用法

最新推荐文章于 2024-07-18 11:48:33 发布
最新推荐文章于 2024-07-18 11:48:33 发布
阅读量460 收藏
点赞数
分类专栏： js jsp jquery 文章标签： javascript jquery servlet 类 tags
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a514548454/article/details/21109363
版权
jsp 同时被 3 个专栏收录
17 篇文章 0 订阅
订阅专栏
js
16 篇文章 0 订阅
订阅专栏
jquery
10 篇文章 0 订阅
订阅专栏

一，首先复制三个类

类一PageContextTag

package log.tags;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.jsp.JspTagException;
import javax.servlet.jsp.tagext.TagSupport;

public class PageContextTag extends TagSupport{
 private static final long serialVersionUID = 1L;
 private String href;

 public String getHref() {
  return href;
 }

 public void setHref(String href) {
  this.href = href;
 }
 
 public int doEndTag() throws JspTagException {
  try {
   HttpServletRequest re = (HttpServletRequest)pageContext.getRequest();
   String out = re.getRequestURL().toString();
   int index = out.indexOf("/", out.indexOf("/", 7)+1);
   out = "<base href=\""+out.substring(0,index)+"/\">";
   pageContext.getOut().write(out); 
  }catch(Exception e){
   e.printStackTrace();
  }
  return EVAL_PAGE;
 }
}

 

类二PageTag

package log.tags;

import java.io.IOException;

import javax.servlet.jsp.JspTagException;
import javax.servlet.jsp.tagext.BodyContent;
import javax.servlet.jsp.tagext.TagSupport;

/**
 * describe: 翻页标签
 * @author zhangming
 * @date 2010-3-18
 */
public class PageTag extends TagSupport{
 private String method;     //action对应查询方法
 private String tarAction;  //action
 private String tarFrame;   //对应frame
 
 public int doStartTag() throws JspTagException {
  return SKIP_BODY;
 }

 public int doEndTag() throws JspTagException {
  try {
   StringBuffer out = new StringBuffer();
   out.append("<!------------------------------ start pageTag ------------------------------>\r\n");
   out.append("<script type=\"text/javascript\" language=\"javaScript\">\r\n");
   out.append(" function turn(control,aa){\r\n");
   out.append("  var indexint=parseInt(document.getElementById(\"currp\").innerHTML);\r\n");
   out.append("  var countpage=parseInt(document.getElementById(\"countpage\").innerHTML);\r\n");
   out.append("  if(control==\"first\"){\r\n");
   out.append("      if(indexint==1||indexint==0) {\r\n");
   //out.append("       alert(\"这是首页！\");\r\n");
   out.append("       return;\r\n");
   out.append("      } \r\n");
   out.append("   indexint = 1;\r\n");
   out.append("  }if(control==\"previous\"){\r\n");
   out.append("      if(indexint==1||indexint==0) {\r\n");
   //out.append("       alert(\"这是首页！\");\r\n");
   out.append("       return;\r\n");
   out.append("      } \r\n");   
   out.append("   indexint = indexint-1;\r\n");
   out.append("  }if(control==\"next\"){\r\n");
   out.append("      if(indexint==countpage) {\r\n");
   //out.append("       alert(\"这是尾页！\");\r\n");
   out.append("       return;\r\n");
   out.append("      } \r\n");   
   out.append("   indexint = indexint+1;\r\n");
   out.append("  }if(control==\"last\"){\r\n");
   out.append("      if(indexint==countpage) {\r\n");
   //out.append("       alert(\"这是尾页！\");\r\n");
   out.append("       return;\r\n");
   out.append("      } \r\n");    
   out.append("   indexint = parseInt(document.getElementById(\"countpage\").innerHTML);\r\n");
   out.append("  }document.forms[0].currPage.value=indexint; \r\n");
   out.append("  document.forms[0].action=\""+tarAction+"\";\r\n");
   out.append("  document.forms[0].target=\""+tarFrame+"\";\r\n");
   out.append("  document.forms[0].submit();\r\n");
   out.append(" }\r\n");
   out.append("    function goTo(){\r\n");
   out.append("      var re =   /^\\+?[1-9][0-9]*$/;\r\n");
   out.append("      var obj=  document.getElementById(\"currPage\");\r\n");
   out.append("      var countPage= document.getElementById(\"countpage\").innerHTML;\r\n");
   out.append("      if (!re.test(obj.value))\r\n");
   out.append("        {\r\n");
   out.append("          alert(\"请输入正确的页数\");\r\n");
   out.append("          obj.focus();\r\n");
   out.append("        }else{\r\n");
   out.append("          if(countPage<obj.value) obj.value=countPage;\r\n");
   out.append("          document.forms[0].action=\""+tarAction+"\";\r\n");
   out.append("    document.forms[0].target=\""+tarFrame+"\";\r\n");
   out.append("    document.forms[0].submit();\r\n");
   out.append("        }\r\n");
   out.append("    }\r\n");
   
   out.append("</script>\r\n");
   
   out.append("      <table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" style=\"border:0px\">\r\n");
   out.append("        <tr> \r\n");
   out.append("          <td width=\"20\" height=\"25\" align=\"right\"><img src=\"/jjxf_MP/image/page/pic02.gif\" width=\"20\" height=\"11\"></td>\r\n");
   out.append("          <td align=\"left\">查询结果 共<span class=\"text\"> <span class=\"text\"><label id=\"icount\">0</label></span> \r\n");
   out.append("            </span>条记录，第<span class=\"text\"><label id=\"currp\">0</label>/<label id=\"countpage\">0</label></span> 页</td>\r\n");
   out.append("          <td align=\"right\"> <table  align=\"right\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" style=\"border:0px\">\r\n");
   out.append("              <tr> \r\n");
   out.append("                <td width=\"18\"><a href=\"javascript:void(0)\"  οnclick=\"turn('first',document.forms[0])\" ><img src=\"/jjxf_MP/image/page/sy1.gif\" alt=\"首页\" name=\"firstpage\" id=\"firstpage\" width=\"16\" height=\"15\" border=\"0\"></a></td>\r\n");
   out.append("                <td width=\"48\"><a href=\"javascript:void(0)\"  οnclick=\"turn('previous',document.forms[0])\" ><img src=\"/jjxf_MP/image/page//syy1.gif\" alt=\"上一页\" name=\"previouspage\" id=\"previouspage\" width=\"46\" height=\"15\" border=\"0\"></a></td>\r\n");
   out.append("                <td width=\"48\"><a href=\"javascript:void(0)\"  οnclick=\"turn('next',document.forms[0])\" ><img src=\"/jjxf_MP/image/page/xyy1.gif\" alt=\"下一页\" name=\"nextpage\" id=\"nextpage\" width=\"46\" height=\"15\" border=\"0\"></a></td>\r\n");
   out.append("                <td width=\"18\"><a href=\"javascript:void(0)\"  οnclick=\"turn('last',document.forms[0])\" ><img src=\"/jjxf_MP/image/page/wy1.gif\" alt=\"尾页\" name=\"lastpage\" id=\"lastpage\" width=\"16\" height=\"15\" border=\"0\"></a></td>\r\n");
   out.append("          <td align=\"left\" class=\"STYLE2\">&nbsp;转到第 <input type=\"text\" name=\"currPage\" id=\"currPage\" value=\"1\" style=\"width:30px\">页&nbsp;<input type=\"button\" name=\"go\" value=\"GO\" onClick=\"goTo();\"></td>\r\n");
   out.append("              </tr>\r\n");
   out.append("            </table></td>\r\n");
   out.append("        </tr>\r\n");
   out.append("      </table>\r\n");
   out.append("<!------------------------------ end pageTag ------------------------------>\r\n");
   pageContext.getOut().write(out.toString());  
  } catch (IOException e) {
   e.printStackTrace();
  }
  return EVAL_PAGE;
 }

 public void doInitBody() throws JspTagException {
 }

 public void setBodyContent(BodyContent bodyContent) {
 }

 public String getMethod() {
  return method;
 }

 public void setMethod(String method) {
  this.method = method;
 }

 public String getTarAction() {
  return tarAction;
 }

 public void setTarAction(String tarAction) {
  this.tarAction = tarAction;
 }

 public String getTarFrame() {
  return tarFrame;
 }

 public void setTarFrame(String tarFrame) {
  this.tarFrame = tarFrame;
 }

 
 
}

类三PageTagForMoreForm

package log.tags;

import java.io.IOException;

import javax.servlet.jsp.JspTagException;
import javax.servlet.jsp.tagext.BodyContent;
import javax.servlet.jsp.tagext.TagSupport;

/**
 * describe: 翻页标签
 * @author zhangming
 * @date 2010-3-18
 */
public class PageTagForMoreForm extends TagSupport{
 private String method;     //action对应查询方法
 private String tarAction;  //action
 private String tarFrame;   //对应frame
 private String tarForm;//对应的form
 private String count;//对应的元素
 public int doStartTag() throws JspTagException {
  return SKIP_BODY;
 }

 public int doEndTag() throws JspTagException {
  try {
   StringBuffer out = new StringBuffer();
   out.append("<!------------------------------ start pageTag ------------------------------>\r\n");
   out.append("<script type=\"text/javascript\" language=\"javaScript\">\r\n");
   out.append(" function turn"+count+"(control,aa){\r\n");
   out.append("  var indexint=parseInt(document.getElementById(\"currp"+count+"\").innerHTML);\r\n");
   out.append("  var countpage=parseInt(document.getElementById(\"countpage"+count+"\").innerHTML);\r\n");
   out.append("  if(control==\"first\"){\r\n");
   out.append("      if(indexint==1||indexint==0) {\r\n");
   //out.append("       alert(\"这是首页！\");\r\n");
   out.append("       return;\r\n");
   out.append("      } \r\n");
   out.append("   indexint = 1;\r\n");
   out.append("  }if(control==\"previous\"){\r\n");
   out.append("      if(indexint==1||indexint==0) {\r\n");
   //out.append("       alert(\"这是首页！\");\r\n");
   out.append("       return;\r\n");
   out.append("      } \r\n");   
   out.append("   indexint = indexint-1;\r\n");
   out.append("  }if(control==\"next\"){\r\n");
   out.append("      if(indexint==countpage) {\r\n");
   //out.append("       alert(\"这是尾页！\");\r\n");
   out.append("       return;\r\n");
   out.append("      } \r\n");   
   out.append("   indexint = indexint+1;\r\n");
   out.append("  }if(control==\"last\"){\r\n");
   out.append("      if(indexint==countpage) {\r\n");
   //out.append("       alert(\"这是尾页！\");\r\n");
   out.append("       return;\r\n");
   out.append("      } \r\n");    
   out.append("   indexint = parseInt(document.getElementById(\"countpage"+count+"\").innerHTML);\r\n");
   out.append("  }document."+tarForm+".currPage.value=indexint; \r\n");
   out.append("  document."+tarForm+".action=\""+tarAction+"\";\r\n");
   out.append("  document."+tarForm+".target=\""+tarFrame+"\";\r\n");
   out.append("  document."+tarForm+".submit();\r\n");
   out.append(" }\r\n");
   out.append("    function goTo"+count+"(){\r\n");
   out.append("      var re =   /^\\+?[1-9][0-9]*$/;\r\n");
   out.append("      var obj=  document."+tarForm+".currPage;\r\n");
   out.append("      var countPage= document.getElementById(\"countpage"+count+"\").innerHTML;\r\n");
   out.append("      if (!re.test(obj.value))\r\n");
   out.append("        {\r\n");
   out.append("          alert(\"请输入正确的页数\");\r\n");
   out.append("          obj.focus();\r\n");
   out.append("        }else{\r\n");
   out.append("          if(countPage<obj.value) obj.value=countPage;\r\n");
   out.append("          document."+tarForm+".action=\""+tarAction+"\";\r\n");
   out.append("    document."+tarForm+".target=\""+tarFrame+"\";\r\n");
   out.append("    document."+tarForm+".submit();\r\n");
   out.append("        }\r\n");
   out.append("    }\r\n");
   
   out.append("</script>\r\n");
   
   out.append("      <table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\r\n");
   out.append("        <tr> \r\n");
   out.append("          <td width=\"20\" height=\"25\" align=\"right\"><img src=\"/jjxf_MP/image/page/pic02.gif\" width=\"20\" height=\"11\"></td>\r\n");
   out.append("          <td class=\"biao\">查询结果 共<span class=\"text\"> <span class=\"text\"><label id=\"icount"+count+"\">0</label></span> \r\n");
   out.append("            </span>条记录，第<span class=\"text\"><label id=\"currp"+count+"\">0</label>/<label id=\"countpage"+count+"\">0</label></span> 页</td>\r\n");
   out.append("          <td align=\"right\"> <table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\r\n");
   out.append("              <tr> \r\n");
   out.append("                <td width=\"18\"><a href=\"javascript:void(0)\"  οnclick=\"turn"+count+"('first',document."+tarForm+")\" ><img src=\"/jjxf_MP/image/page/sy1.gif\" alt=\"首页\" name=\"firstpage"+count+"\" id=\"firstpage"+count+"\" width=\"16\" height=\"15\" border=\"0\"></a></td>\r\n");
   out.append("                <td width=\"48\"><a href=\"javascript:void(0)\"  οnclick=\"turn"+count+"('previous',document."+tarForm+")\" ><img src=\"/jjxf_MP/image/page//syy1.gif\" alt=\"上一页\" name=\"previouspage"+count+"\" id=\"previouspage"+count+"\" width=\"46\" height=\"15\" border=\"0\"></a></td>\r\n");
   out.append("                <td width=\"48\"><a href=\"javascript:void(0)\"  οnclick=\"turn"+count+"('next',document."+tarForm+")\" ><img src=\"/jjxf_MP/image/page/xyy1.gif\" alt=\"下一页\" name=\"nextpage"+count+"\" id=\"nextpage"+count+"\" width=\"46\" height=\"15\" border=\"0\"></a></td>\r\n");
   out.append("                <td width=\"18\"><a href=\"javascript:void(0)\"  οnclick=\"turn"+count+"('last',document."+tarForm+")\" ><img src=\"/jjxf_MP/image/page/wy1.gif\" alt=\"尾页\" name=\"lastpage"+count+"\" id=\"lastpage"+count+"\" width=\"16\" height=\"15\" border=\"0\"></a></td>\r\n");
   out.append("          <td align=\"left\" class=\"STYLE2\">&nbsp;转到第 <input type=\"text\" name=\"currPage\" id=\"currPage\" value=\"1\" style=\"width:30px\">页&nbsp;<input type=\"button\" name=\"go\" value=\"GO\" onClick=\"goTo"+count+"();\"></td>\r\n");
   out.append("              </tr>\r\n");
   out.append("            </table></td>\r\n");
   out.append("        </tr>\r\n");
   out.append("      </table>\r\n");
   out.append("<!------------------------------ end pageTag ------------------------------>\r\n");
   pageContext.getOut().write(out.toString());  
  } catch (IOException e) {
   e.printStackTrace();
  }
  return EVAL_PAGE;
 }

 public void doInitBody() throws JspTagException {
 }

 public void setBodyContent(BodyContent bodyContent) {
 }

 public String getMethod() {
  return method;
 }

 public void setMethod(String method) {
  this.method = method;
 }

 public String getTarAction() {
  return tarAction;
 }

 public void setTarAction(String tarAction) {
  this.tarAction = tarAction;
 }

 public String getTarFrame() {
  return tarFrame;
 }

 public void setTarFrame(String tarFrame) {
  this.tarFrame = tarFrame;
 }

 public String getTarForm() {
  return tarForm;
 }

 public void setTarForm(String tarForm) {
  this.tarForm = tarForm;
 }

 public String getCount() {
  return count;
 }

 public void setCount(String count) {
  this.count = count;
 }
 
 
 
}

二在WEB-INFO下新建一个文件名为tld，并创建一个tyTag.tld

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN" "http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd">
<taglib>
 <tlibversion>1.2</tlibversion>
 <jspversion>1.1</jspversion>
 <shortname>tyTag</shortname>
 <uri>/tyTag</uri>
 <tag>
  <name>page</name>
  <tagclass>log.tags.PageTag</tagclass>
  <bodycontent>JSP</bodycontent>
  <attribute>
   <name>tarAction</name>
   <required>false</required>
   <rtexprvalue>true</rtexprvalue>
  </attribute>
  <attribute>
   <name>tarFrame</name>
   <required>true</required>
   <rtexprvalue>true</rtexprvalue>
  </attribute>
 </tag>
 <tag>
  <name>pageForMore</name>
  <tagclass>log.tags.PageTagForMoreForm</tagclass>
  <bodycontent>JSP</bodycontent>
  <attribute>
   <name>tarAction</name>
   <required>false</required>
   <rtexprvalue>true</rtexprvalue>
  </attribute>
  <attribute>
   <name>tarFrame</name>
   <required>true</required>
   <rtexprvalue>true</rtexprvalue>
  </attribute>
  <attribute>
   <name>tarForm</name>
   <required>true</required>
   <rtexprvalue>true</rtexprvalue>
  </attribute>
  <attribute>
   <name>count</name>
   <required>true</required>
   <rtexprvalue>true</rtexprvalue>
  </attribute>
 </tag>
  <tag>
  <name>base</name>
  <tagclass>log.tags.PageContextTag</tagclass>
  <bodycontent>JSP</bodycontent>
 </tag>
</taglib>

三创建查询结果类


package util;

import java.util.List;

/**
 * 查询结果
 * @author Administrator
 *
 */
public class QueryResult {
 public List vector; // 查询结果集合
 public String countRows; //行数
 public String countPages; //页数
 public List getVector() {
  return vector;
 }
 public void setVector(List vector) {
  this.vector = vector;
 }
 public String getCountRows() {
  return countRows;
 }
 public void setCountRows(String countRows) {
  this.countRows = countRows;
 }
 public String getCountPages() {
  return countPages;
 }
 public void setCountPages(String countPages) {
  this.countPages = countPages;
 }
 
}

四在公共类里面加上

package util;

public class testUtil {
 /** 分页显示时每页最多显示的记录数 */
 public static final short MAX_RESULT_PER_PAGE = 10;
 /**
  * 根据记录数得到页数
  *
  * @param rows
  *            总记录数
  * @param max_per_page
  *            每页显示最大记录数
  * @return String
  */
 public static String getCountPage(Integer rows, int max_per_page) {
  int temp = (int) (rows.intValue() / max_per_page);
  if (rows.intValue() % max_per_page != 0)
   temp++;
  return temp + "";
 }
}

五、业务层的代码

List<Register> list = hibernateTemplateDao.page_list(hql.toString(),
    table, currPage, Constants.MAX_RESULT_PER_PAGE);
  qs.setCountRows(totalRecord);
  qs.setCountPages(GeneralUtil.getCountPage(new Integer(Integer
    .parseInt(qs.getCountRows())), Constants.MAX_RESULT_PER_PAGE));
  for (Register reg : list) {
   reg.setCurrentStateCh(GeneralUtil.getCurrentChState(reg
     .getCurrentState()));
  }
  qs.setVector(list);

六、逻辑层调用

@Action(value = "/commonQuery/commonQueryTable", results = { @Result(name = "commonQueryTable", location = "/page/caseQuery/commonQuery_main_table.jsp") })
 public String commonQueryTable() throws Exception {
  try {
   QueryResult qs = commonQueryService.getAllCaseRegister(register,
     regDateBegin, regDateEnd, currPage);
   if (qs != null && qs.getCountRows().equals("0")) {
    this.setCurrPage("0");
   }

   this.setQueryResult(qs);
  } catch (Exception e) {
   e.printStackTrace();
  }
  return "commonQueryTable";
 }

七、jsp页面调用

初始化页面

<table width="100%" border="0" cellspacing="0" cellpadding="0"
        cellpadding="1">

        <tr>
         <td>
          <tytag:page tarFrame="frame1"
           tarAction="${base}/caseCheck/queryCaseCheckTable.shtml"></tytag:page>
         </td>
        </tr>

       </table>

显示页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="/tags/tytag" prefix="tytag"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>信访登记</title>
   
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->

 <script type="text/javascript" src="<%=basePath%>javascript/jquery-1.4.min.js"></script>
  <script type="text/javascript" src="<%=basePath%>javascript/page.js"></script>
<link rel="stylesheet" href="<%=basePath%>css/main.css" />
<style type="text/css">
.textBg{
background-color:#e9e6e6 ;
}

.t1{
color:#0000FF ;
text-decoration:none ;
}
td{
text-align:center ;

}
.t2{
color:#000000 ;
text-decoration:none ;
}

.textonlyread{
 background:#F0F0F0
}
fieldset legend {
color:#1E7ACE;
font-weight:bold;

}
.tr:hover {
 border: #99BBE8 1px solid;
 background: #99BBE8;
}

.STYLE1 {color: #FF0000}

</style>
</head>
<script type="text/javascript"> 
$(document).ready(function(){
  loadtable();
})
function fillCurrentId(id){
   window.parent.document.getElementById("registerId").value = id;
}
</script>
<body bgcolor="#FFFFFF">
<s:form>
<s:hidden name="countPage" id="countPage" />
<s:hidden name="countRow" id="countRow" />
<s:hidden name="currPage" id="currPage" />
<table width="99%" align="center" border="1" cellspacing="0" cellpadding="3">
    <tr style="background-image: url('<%=basePath %>image/one_result.jpg')">
        <th scope="col">序号</th>
  <th scope="col">选择</th>
        <th scope="col">登记日期</th>
        <th scope="col">登记人</th>
        <th scope="col">被信访人</th>
  <th scope="col">办理状态</th>
        <th scope="col">登记部门</th>
  <th scope="col">承办部门</th>
        <th scope="col">主要违纪线索</th>
    </tr>
    <s:iterator value="vector" id="regInfo" status="st">
          <tr class="tr" bgcolor="<s:if test='#st.odd==true'></s:if><s:else>#eceaeb</s:else>">
          <td>
             &nbsp;<s:property value="#st.index+1"/>
          </td>
          <td>
           <input type="radio" name="radiobutton" value="<s:property value='id'/>" οnclick="fillCurrentId('${regInfo.id }')"/>
          </td>
          <td>
           &nbsp;<s:date name="regTime" format="yyyy-MM-dd"/>
          </td>
          <td>
           &nbsp; <s:property value="regUserName"/>
          </td>
           <td>
            &nbsp;<s:property value="bePetName"/>
          </td>
           <td>
            &nbsp;<s:property value="currentStateCh"/>
          </td>
          <td>
            &nbsp;<s:property value="regUnit.unitName"/>
          </td>
          <td>
            &nbsp;<s:property value="currentUnit.unitName"/>
          </td>
          <td title="<s:property value='brief'/>">
            <s:if test="brief != null && brief.length() >14">
                 <s:property value="brief.substring(0,14)"/>...
            </s:if>
            <s:else>
                 &nbsp;<s:property value="brief"/>
            </s:else>
          </td>
          </tr>
    </s:iterator>
</table>
</s:form>
</body>
</html>

 

 

a514548454
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯JS前端实现分页代码
11-25
- **可复用性**：为了提高代码的复用性，可以将分页逻辑封装成一个独立的组件，以便在其他项目中重复使用。 总之，纯JavaScript实现前端分页是一个涉及到HTML结构设计、JavaScript事件处理、AJAX请求、数据解析和...
简单的分页代码js实现
11-25
jQuery分页插件——jQuery.page.js用法很简单，效果很棒  2、调用方法：  $(".tcdPageCode").createPage({ pageCount:10, current:1, backFn:function(p){ //单击回调方法，p是当前页码 } }); pageCount...
JS动态分页代码
05-01
以上代码创建了一个分页实例，将其插入ID为`pagination-container`的元素中，并设置了相应的配置选项。`pagination.js`还提供了其他高级功能，如事件监听、自定义回调函数等，允许你进一步定制分页行为。 在实际...
js 分页代码带切换效果
10-29
在这个场景中，我们讨论的是如何使用 JavaScript 来实现一个具有切换效果的分页功能。 首先，让我们理解分页的基本原理。在网页上，当数据量过大时，一次性加载所有内容可能导致页面加载速度变慢，用户体验下降。...
vue实现前端分页完整代码
10-15
- **状态管理**：如果项目复杂，可能需要使用Vuex进行状态管理，以协调不同组件之间的分页状态。 总的来说，这个Vue实例提供了一个基本的前端分页实现，但实际项目中还需要考虑更多的细节，比如错误处理、数据加载...
弹出拟态对话框步骤
血法师的专栏
03-10 1498
一、jsp页面 //添加预警信息  function doAdd() {     var url="${base}/alarm/doAdd.shtml?time="+new Date();   var str=window.showModalDialog(url,"","location:No;status:No;help:No;dialogWidth:900px;dialogHeigh
最简单分页
血法师的专栏
03-13 601
目录 1知识点.. 1 1.1上次课程的主要知识点.. 1 1.2 本次预计讲解的知识点.. 2 2具体内容.. 2 2.1分页.. 2 2.1.1 PageData类.. 3 2.1.2 NewsTypeDao类.. 4 2.1.3 NewsTypeServlet5 2.1.4 list.jsp. 6 3 总结.. 8 4 作业.. 8
3D抖动的文字
血法师的专栏
04-22 501
Phrase="3D抖动的文字！";    Balises="";    Taille=40;    Midx=100;    Decal=0.5;    Nb=Phrase.length;    y=-10000;    for(x=0;x     Balises=Balises+''+Phrase.charAt(x)+'';   }  document.write(Bali
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 779
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
ReactRouter v6升级的步骤
feixin369的博客
07-14 423
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
vue搜索框过滤--- computed、watch区别
学习笔记分享给大家
07-16 343
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
react 快速入门思维导图
weixin_44565776的博客
07-18 144
只要掌握了这些react技能，基本就可以熟练使用react了
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 973
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
HOW - SVG 图标组件封装（Lucide React）
最新发布
weixin_58540586的博客
07-18 799
在中我们介绍过 “动态 Fetch CDN SVG 图标”，这种在开发者将需要用到 图标 依次上传到 CDN 再在项目通过请求引入使用的场景。但其实，更常见的做法还是统一维护一组 SVG 图标，然后将其封装成组件，直接在项目中通过 Import 的形式使用。
vue3配置代理
Joe world的博客
07-16 148
【代码】vue3配置代理。
Vue2中的v-model的表单元素绑定
m0_56698546的博客
07-16 246
常用的表单元素是可以用v-model来绑定关联 ->快速获取或设置表单元素的值。它会根据控件的类型自动选择正确的方法来更新元素。
vue3 vxe-grid查询有返回数据，但是不显示的问题解决
jwbabc的专栏
07-18 232
vxe-grid，方法是调用了，也有返回结果，但是就是不显示的解决。
多源字段聚合重塑算法
qq_43071699的博客
07-18 275
【代码】多源字段聚合重塑算法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值