`
yzz9i
  • 浏览: 221047 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

很强大的jsp手写分页插件 实现json 等一些ajax技术 联合查询 模糊查询 条件查询

js分页插件js实用分页方法ajax获取数据绑定在select中json 
阅读更多
这个插件里面分页功能很强大，调用者只需赋几个值就可以了。

下面是ticket.jsp 全代码： 
<script type="text/javascript" src="../My97DatePicker/WdatePicker.js">
</script>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
[color=red]<base href="<%=basePath%>">[/color] <!--这个路径根据自己而定-->
<%@page import="com.pojos.TbLog"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript" src="js/jquery-1.6.js">
</script>

<script type="text/javascript"
	src="jslib/jquery_pagination/jquery.pagination.js">
</script>
<link rel="stylesheet" href="css/qne.css" type="text/css"></link>
<script language="javascript" type="text/javascript"
	src="js/validate.js">
</script>

<script type="text/javascript" src="jslib/mytable/mytable1.1.js"
	charset="gb2312">
</script>

<link rel="stylesheet" type="text/css" href="css/base.css">
<link type="text/css" rel="stylesheet"
	href="jslib/mytable/css/mytable.css" />
<link type="text/css" rel="stylesheet"
	href="jslib/jquery_pagination/pagination.css" />
<c:set scope="page" var="isColleague" value="${param.type==1}" />
<style>
table.mytable {
	width: 1119px;
}
</style>



<script type="text/javascript">
function detail(orderid) {
	var url = "<%=basePath%>/qne.do?p=orderManage&manageType=detail&orderid=" + orderid;

	// var ShopConfirmLayer=jQuery("#ShopConfirmLayer").val(); 
	$.get(url, {
		id : "d"
	}, function(content) {
		document.getElementById("DetailLayer").innerHTML = content;
	});

	var DetailLayer = document.getElementById("DetailLayer");
	var webBgLayer = document.getElementById("webBgLayer");
	// ShopConfirmLayer.innerHTML=str; 
	DetailLayer.style.display = "";//显示内容层，显示覆盖层

	webBgLayer.style.display = "";
	webBgLayer.style.width = document.documentElement.scrollWidth + 200 + "px"; //为覆盖层设置宽度
	webBgLayer.style.height = document.documentElement.scrollHeight + 1350
			+ "px"; //为覆盖层设置高度 

	DetailLayer.style.left = ((webBgLayer.style.width - 726) / 2) + "px";
	DetailLayer.style.top = Math
			.abs(parseInt((document.documentElement.clientHeight - ShopConfirmLayer.offsetHeight) / 2))
			+ document.documentElement.scrollTop + "px"; //为内容层设置位置

}

function alter(orderid){
	var url = "<%=basePath%>/qne.do?p=orderManage&manageType=alter&orderid=" + orderid;

	// var ShopConfirmLayer=jQuery("#ShopConfirmLayer").val(); 
	$.get(url, {
		id : "d"
	}, function(content) {
		document.getElementById("DetailLayer").innerHTML = content;
	});

	var DetailLayer = document.getElementById("DetailLayer");
	var webBgLayer = document.getElementById("webBgLayer");
	// ShopConfirmLayer.innerHTML=str; 
	DetailLayer.style.display = "";//显示内容层，显示覆盖层

	webBgLayer.style.display = "";
	webBgLayer.style.width = document.documentElement.scrollWidth + 200 + "px"; //为覆盖层设置宽度
	webBgLayer.style.height = document.documentElement.scrollHeight + 1600
			+ "px"; //为覆盖层设置高度 

	DetailLayer.style.left = ((webBgLayer.style.width - 726) / 2) + "px";
	DetailLayer.style.top = Math
			.abs(parseInt((document.documentElement.clientHeight - ShopConfirmLayer.offsetHeight) / 2))
			+ document.documentElement.scrollTop + "px"; //为内容层设置位置
}

function CloseDetail() {
	var DetailLayer = document.getElementById("DetailLayer");
	var webBgLayer = document.getElementById("webBgLayer");
	DetailLayer.style.display = "none";
	webBgLayer.style.display = "none";
}

function drop(orderid) {
	var url = "<%=basePath%>/qne.do?p=orderDrop&orderid=" + orderid;
	question = confirm("您确定删除吗？")
	if (question != "0") {
		$.get(url, {
			id : "d"
		}, function(content) {
				$("#query").click();
		});
	}

}
</script>


<%-- 查询表单与结果显示区 -start--%>
<div id="queryDiv" style="padding-top: 18px;">
	<form id="queryForm" class="queryForm" onsubmit="sbCont()">
		<table width="1117px" class="queryTable"
			style="border: 1px solid silver;">
			<tr>
				<td>
					订单号
				</td>
				<td>
					<input type="text" name="orderNum" id="orderNum" class="isForm"
						size="20" maxlength="20" />
				</td>
				<td>
					订单状态
				</td>
				<td>
					<select name="orderStatus" id="orderStatus" class="isForm">

						<option value="">
						
						</option>
						<option value="0">
							未出票申请退款
						</option>
						<option value="5">
							支付成功等待出票
						</option>
						<option value="6">
							出票中
						</option>
						<option value="7">
							出票完成
						</option>
						<option value="4">
							订单取消
						</option>

					</select>
				</td>



				<td>
					订票时间
				</td>
				<td width="330px;">
					<input type="text" name="time" id="time" class="isForm"
						onClick="WdatePicker()" />
				</td>

			</tr>
			<tr>

				<td>
					航班号
				</td>
				<td>
					<input type="text" name="flightNum" class="isForm" size="10"
						maxlength="10" />
				</td>
				<td>
					舱位
				</td>
				<td>
					<input type="text" name="cabin" id="cabin" class="isForm" />
				</td>
				<td>
					出票完成时间
				</td>
				<td align="left">
					<input type="text" name="finishTime" id="finishTime" class="isForm"
						onClick="WdatePicker()" />
				</td>

			</tr>
			<tr>

				<td>
					乘机人姓名
				</td>
				<td>
					<input type="text" name="passengerName" id="passengerName"
						class="isForm" size="10" maxlength="10" />
				</td>
				<td>
					票号
				</td>
				<td>
					<input type="text" name="ticketNum" id="ticketNum" class="isForm"
						size="10" maxlength="10" />
				</td>
				<td>
					PNR
				</td>
				<td>
					<input type="text" name="pnr" id="pnr" class="isForm" size="10"
						maxlength="10" />
					联系人手机号
					<input type="text" name="linkmanCellPhone" id="linkmanCellPhone"
						class="isForm" size="10" maxlength="10" />
				</td>

			</tr>
			<tr>
				<td colspan="14">
					<div>
						<table style="border: 1px solid silver;">
							<tr>
								<td>
									出发城市
								</td>
								<td>
									<input type="text" name="startCity" id="startCity"
										class="isForm" size="10" maxlength="10" />
								</td>
								<td>
									到达城市
								</td>
								<td>
									<input type="text" name="endCity" id="endCity" class="isForm"
										size="10" maxlength="10" />
								</td>
								<td>
									航班公司
								</td>
								<td>
									<input type="text" name="flightCompany" id="flightCompany"
										class="isForm" size="10" maxlength="10" />
								</td>
								<td>
									航班时间
								</td>
								<td>
									<input type="text" name="flightTime1" id="flightTime1"
										class="isForm" onClick="WdatePicker()" />
								</td>
								<td>
									航程类型
								</td>
								<td>
									<select name="voyageType" id="voyageType" class="isForm">
										<option value="">
											全部航程
										</option>
										<option value="0">
											单程
										</option>
										<option value="1">
											往返
										</option>
									</select>
								</td>



							</tr>
						</table>

					</div>

				</td>
			</tr>
			<tr>
				<td colspan="14">
					<div>
						<table style="border: 1px solid silver;">
							<tr>

								<td>
									出票员
								</td>
								<td>
									<input type="text" name="drawer" id="drawer" class="isForm">
								</td>
								<td>
									录入员
								</td>
								<td>
									<select id="guider" name="guider" class="isForm">
										<option value="">
											全部录入员
										</option>
									</select>
								</td>
							</tr>
						</table>
					</div>
				</td>
			</tr>
			<tr>
				<td style="padding-bottom: 0px;">
					<input type="submit" id="query" value="查询" />
					<input type="reset" value="重置" />
				</td>


			</tr>
			<tr>
				<td height="8px;">

				</td>
			</tr>

		</table>
	</form>
</div>
<div class="viewResults">
	<table class="mytable">
		<thead>
			<tr>
				<th width="20">
					<input type="checkbox" />
				</th>
				<th width="45">
					序
				</th>
				<th>
					<a xx="orderNum">订单号</a>
				</th>
				<th>
					<a xx="name">订单当前状态</a>
				</th>
				<th>
					<a xx="telphone">起始到达</a>
				</th>
				<th>
					<a xx="mobilephone">航班</a>
				</th>
				<th>
					<a xx="work_qq">舱位</a>
				</th>
				<th>
					<a xx="office">出票日期</a>
				</th>
				<th>
					<a xx="department.id">起飞时间</a>
				</th>
				<th>
					<a xx="work_state">票价</a>
				</th>
				<th>
					<a xx="agreement">出票员</a>
				</th>
				<th>
					<a xx="lodging">操作</a>
				</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
	<div style="float: left;">
		<div id="pager" class="pagination" style="float: left;"></div>
		<div
			style="float: left; font: '宋体'; font-size: 14px; color: #000; margin-top: 5px;">
			共
			<span id="totalNums"></span>条记录
		</div>
	</div>
	<div style="clear: both;"></div>
</div>

<!--详细信息内容层-->

<div id="DetailLayer"
	style="position: absolute; top: 300px; left: 100px; z-index: 900; width: 726px; display: none; background-color: white">

	<input name="button1" value="关闭" type="button" onclick="CloseDetail()" />
</div>

<!--覆盖层-->
<div id="webBgLayer"
	style="position: absolute; top: 0px; left: 0px; z-index: 899; background-color: gray; height: 100%; width: 100%; display: none; -moz-opacity: 0.9; filter: alpha(opacity =   50);"></div>

[color=red]<%-- 查询表单与结果显示区 -end--%>[/color][color=red][b] <!--关键了-->[/b][/color]
<script type="text/javascript">
/*mytable--start*/

[color=red]var pagesTotal = 0;//定义总条数[/color]
$.mytable( {
	
<%--	param:{"pvalue":"000001000000000"},--%>
	url : "<%=basePath%>/qne.do?p=searchOrder",
	[color=red]sortCol : [ 'time', 'asc' ],  //按pojo对象中的time 进行asc排序[/color]
	storageSortColAttr : 'xx', //可有可无
	afterTableLoad_beforePaginationLoad : function(cfg) {
		cfg.pagesTotal = pagesTotal;
		$('#totalNums').text(pagesTotal);
	},
	beforeLoad : function() {//mytable查询之前做表单验证
<%--		var t2 = $('#q_work_number');--%>
<%--		var t3 = $('#q_telphone');--%>
<%--		var t4 = $('#q_mobilephone');--%>
<%--		var t5 = $('#q_work_qq');--%>
<%--		var r1 = /[0-9]{1,20}/;--%>
<%--		var e2 = "【工号】应为数字。";--%>
<%--		var e3 = "【电话】应为数字。";--%>
<%--		var e4 = "【手机号】应为数字。";--%>
<%--		var e5 = "【工作QQ】应为数字。";--%>
<%--		return validate( [ t2, t3, t4, t5 ], [ r1, r1, r1, r1 ], [ e2, e3, e4,--%>
<%--				e5 ]);--%>
	}

});
/*mytable--end*/

/*显示用户选择框 ---start*/
var guider = "000001000000000";
var selJson = false;//录入员、领取员、发放员的json串,此变量可放入一个公共页面缓存起来
if(selJson){
	createOptions($("#guider"), guider);//录入员
} else {
	$.post("user.do",{p:"getUsersByPurviewValues", "purviewValues":guider},function(json){
		selJson = eval("("+json+")");
		createOptions($("#guider"), guider);//录入员
	});
}
function createOptions(sel, purviewValue) {
	for(var i = 0; i < selJson.length; i++) {
		if(purviewValue == selJson[i].purviewValue) {
			sel.append("<option value='"+ selJson[i].id +"'>"+selJson[i].username+"</option>");
		}
	}
}
/*显示用户选择框 ---end*/
	
</script>



分页 Action 代码： 
   
//得到页面传递name值
 	Map<String, String> param = new HashMap<String, String>();
		
		for(Enumeration e  =  request.getParameterNames(); e.hasMoreElements();){
			String key = (String)e.nextElement();
			System.out.println(key);
			if(!"p".equals(key)&& !"isSendPage".equals(key)) { //p 我也没搞清是什么作用 还没测试 不过这样可以通过
				String value = (String)request.getParameter(key);
				param.put(key, value);
			}
		}
//注意 map 的键必须是pojo 对象的属性
Nam qneOrderList = qne_OrderService.qneOrderSearchMap(param);
request.setAttribute("qneOrderList", qneOrderList);
		request.setAttribute("sum", qneOrderList.remove(qneOrderList.size()-1)); //返回每页都数据
//在需加这段代码不要改动如下，之前不加分页时候第二页又是从1开始到最大条数
request.setAttribute("rowStart", request.getParameter("rowStart"));


action中 方法也可以这样写：
引用

Map<String, String> requestParaMap = filterRequestParameter(request);
在dao里面 创建stringBuffer 对象 获得map中的值 看是否为空，不为空则 append 。为hql语句。可以看这个：http://yzz9i.iteye.com/admin/blogs/1141648


分页Dao 代码： 
//这个方法你也看得懂是干嘛的
private String getWhereContent2(Map<String, String> param) {
		StringBuilder sb = new StringBuilder();
		for (Iterator<String> iterator = param.keySet().iterator(); iterator
				.hasNext();) {
			String key = iterator.next(); //红色部分不需要改动 都是在插件里面配好了的（有需要可以改js）
			if ([color=red]key != null && !"".equals(key) && !"col".equals(key)
					&& !"order".equals(key) && !"rowStart".equals(key)
					&& !"pageSize".equals(key)[/color]) {
				if (param.get(key) != null && !"".equals(param.get(key))) {
                                     [color=darkred]// 这下面部分if里面的条件是你要进行完全搜索的字段 不需要完全搜索的key 会进行下面的else条件 进行%xxx% 式 搜索[/color]
					if ([color=red]"orderNum".equals(key) || "orderStatus".equals(key)
							|| "flightNum".equals(key) || "cabin".equals(key)
							|| "ticketNum".equals(key) || "pnr".equals(key)
							|| "linkmanCellPhone".equals(key)
							|| "startCity".equals(key) || "endCity".equals(key)
							|| "flightCompany".equals(key)
							|| "voyageType".equals(key)
							|| "linkmanCellPhone".equals(key)[/color]) {
						sb.append(" t." + key + " = '" + param.get(key)
								+ "' and ");
					} else {
						sb.append(" t." + key + " like '%" + param.get(key)
								+ "%' and ");
					}
				}
			}
		}

		if (!"".equals(sb.toString())) {
			sb.insert(0, " where(");
			sb.delete(sb.lastIndexOf("and"), sb.length());
			sb.append(") ");
		}
		return sb.toString();
	}

	@SuppressWarnings("unchecked")
	public List qneOrderSearchMap(Map<String, String> param) {
		System.out.println("---- -----");
		if (null == param || param.isEmpty()) {
			return null;
		}
[color=red]// rowStart pageSize 在插件里面配好了 默认是 0  50  不需改动[/color]
		[color=red]int rowStart = Integer.parseInt(param.get("rowStart"));
		int pageSize = Integer.parseInt(param.get("pageSize"));[/color]

[color=red]// col order 在插件里面配好了 key值便是刚才在ticket.jsp 脚本中所配的   sortCol : [ 'time', 'asc' ][/color]		
		[color=red]String col = param.get("col");   
		String order = param.get("order");[/color]
		boolean b = rowStart >= 0 && pageSize > 0;
		String w = getWhereContent2(param);
		String orderStr = ((null != col && !"".equals(col) && null != order && !""
				.equals(order)) ? "order by t." + col + " " + order : "");
		String hql = "from QNEOrder as t " + w + orderStr;
		String countSql = "select count(*) from QNEOrder as t" + w;
		System.out.println(hql);
		Session session = getSession();
		Query query = session.createQuery(hql);
		List list = null;
		if (b) {
			query.setFirstResult(rowStart);
			query.setMaxResults(pageSize);
		}
		System.out.println("hql=" + hql);
		list = query.list();
		if (b) {
			// 查总记录数
			List l = session.createQuery(countSql).list();
			list.add(l.get(0));
		}
		System.out.println("size:" + list.size());
		System.out.println("222");

		return list;
	}


分页 一个接收查询结果的rest.jsp   ：
引用

<!--<tr><td>ss</td></tr>  //这种格式存储的-->
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<%--<tr><td>ss</td></tr>--%>
<%----%>
<c:forEach items="${qneOrderList}" var="qlist" varStatus="vs">
<tr>
<td>${rowStart+vs.index+1}</td><!--这个很关键 跟在action里面的rowStart直接关联-->
<td>
${qlist.orderNum }
</td>
<td>
<c:if test="${qlist.orderStatus==0}">未出票申请退款</c:if>
<c:if test="${qlist.orderStatus==1}">订座成功待价格确认</c:if>
<c:if test="${qlist.orderStatus==2}">待座位确认</c:if>
<c:if test="${qlist.orderStatus==3}">订座成功待支付</c:if>
<c:if test="${qlist.orderStatus==4}">订单取消</c:if>
<c:if test="${qlist.orderStatus==5}">支付成功待出票</c:if>
<c:if test="${qlist.orderStatus==6}">出票中</c:if>
<c:if test="${qlist.orderStatus==7}">出票完成</c:if>
<c:if test="${qlist.orderStatus==8}">改签申请中</c:if>
<c:if test="${qlist.orderStatus==9}">改签完成</c:if>
<c:if test="${qlist.orderStatus==10}">退票申请中</c:if>
<c:if test="${qlist.orderStatus==11}">退票完成待退款</c:if>
<c:if test="${qlist.orderStatus==12}">退票完成</c:if>
<c:if test="${qlist.orderStatus==13}">待出保订单</c:if>

</td>
<td>
<fmt:formatDate value="${qlist.flightTime1}" type="time"
timeStyle="medium" />
${qlist.startCity }

</td>
<td>
<fmt:formatDate value="${qlist.flightTime1}" type="time"
timeStyle="medium" />
${qlist.endCity }
</td>
<td>
${qlist.flightNum }
</td>
<td>
<fmt:formatDate value="${qlist.finishTime }" type="both" />
</td>
<td>
<fmt:formatDate value="${qlist.flightTime1 }" type="both" />
</td>

<td>
${qlist.onTicketPrice }
</td>
<td>
${qlist.drawer }
</td>


<td>

<a href="javascript:void(0)" onclick="alter(${qlist.id})">修改</a>
<a href="javascript:void(0)" onclick="detail(${qlist.id})">详情</a>
<a href="javascript:void(0)" onclick="drop(${qlist.id})">删除</a>
<%-- <a href="javascript:void(0)" onclick="dropOrderButton()"></a>--%>

</td>

</tr>
</c:forEach>

<script>
pagesTotal = ${sum};  // 得到后台处理的最大条数把它传给show.jsp页面 </script>



先说到这儿，分页就可以实现了，而已还有ajax 获取值绑定在select中哦。
ajax 获取值绑定在select中用到的Action方法： 
public ActionForward getUsersByPurviewValues(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		String pvs = request.getParameter("purviewValues");
		String[] pvArr = null;
		if(pvs != null) {
			pvArr = pvs.split(",");
		}
        String json = iUserSetService.getUsersByPurviewValues(pvArr);
        PrintWriter pw = response.getWriter();
		pw.print(json);
		pw.close();
        return null;
	}

ajax 获取值绑定在select中用到的Dao方法： 
/**
	 * 通过权限值得到用户json串
	 * @param pvArr权限值数组
	 * @return
	 * @throws Exception 
	 */
	@SuppressWarnings("unchecked")
	public String getUsersByPurviewValues2(String[] pvArr) throws Exception {
		String orS = MyUtils.getOrStr(pvArr, "p.value", true);
		String temp = orS.length()>0?" WHERE "+orS:"";
		String sql ="SELECT"+ 
					"	h.handlerID,h.name,p.value "+
					"FROM "+
					"	tb_handler h "+
					"	INNER JOIN tb_group g ON h.group_id=g.id "+
					"	LEFT OUTER JOIN tb_group_purview gp ON g.id=gp.group_id "+
					"	INNER JOIN tb_purview p ON p.id=gp.purview_id "+
					temp+
					"UNION "+
					"SELECT "+
					"	h.handlerID,h.name,p.value "+
					"FROM "+
					"	tb_handler h "+
					"	LEFT OUTER JOIN tb_personal_purview pp ON h.handlerID=pp.hanlder_id "+
					"	INNER JOIN tb_purview p ON p.id=pp.purview_id "+
					temp;
		
		Session session = getSession();
		List l = session.createSQLQuery(sql).list();
		StringBuilder sb = new StringBuilder();
		for (Iterator iterator = l.iterator(); iterator.hasNext();) {
			Object[] o = (Object[]) iterator.next();
			sb.append("{id:'"+ o[0] +"',username:'"+o[1]+"',purviewValue:'"+o[2]+"'},");
		}
		if(!"".equals(sb.toString())) {
			sb.delete(sb.lastIndexOf(","), sb.length());
			sb.insert(0, "[");
			sb.append("]");
		}
		return sb.toString();
	}


好好研究下 一定会让你收获不菲的哦！


2
顶
0
踩
分享到：
| 正则简单应用 获取字符串数字 获取字符串 ...
评论
1 楼 hzau_chen 2013-04-25  
        :i
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    web前端+jquery与ajax+json+手写前端完全实现分页

    本主题聚焦于"web前端+jQuery与Ajax+JSON+手写前端完全实现分页"，这是一种高效的方法来处理大量数据，提升用户体验，同时减轻服务器压力。下面将详细介绍这些关键技术点。 **jQuery** 是一个快速、简洁的...

    mybatis分页插件支持查询

    mybatis分页插件支持查询~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    Jquery Ajax分页（有实例）

    **jQuery AJAX分页技术详解** 在Web开发中，分页是一种常见的数据展示方式，它能够有效地组织大量数据，提高页面加载速度，优化用户体验。jQuery，一个轻量级、功能丰富的JavaScript库，结合AJAX（异步JavaScript和...

    分页手写纯手写

    - 前端则可以使用JavaScript（Vanilla JS、React、Vue等），结合Ajax异步请求实现分页。 总的来说，"分页手写纯手写"意味着要掌握如何在前后端独立实现这个功能，这对于理解数据操作和提升编程技能非常有帮助。...

    Java+MySQL+JSP+Java原生手写实现分页

    本项目“Java+MySQL+JSP+Java原生手写实现分页”正是一个专注于展示如何使用Java后端、MySQL数据库、JSP（Java Server Pages）以及AJAX（异步JavaScript和XML）技术来实现这一功能的实例。以下是这个项目所涉及的...

    常用的Ajax分页，不用手写分页，节省宝贵时间

    ### 常用的Ajax分页技术：节省宝贵时间与提升效率 在现代Web开发中，数据展示的优化是用户体验的关键部分。其中，Ajax（Asynchronous JavaScript and XML）分页技术因其无需重载整个页面即可更新部分内容而备受青睐...

    ajax pro分页 非常标准的 写法 供学习

    在Web开发中，Ajax（Asynchronous JavaScript and XML）技术被广泛用于实现页面的无刷新更新，提高用户体验。本文将深入探讨“Ajax Pro分页”的概念、实现原理以及一个非常标准的写法，供学习者参考。 一、Ajax Pro...

    AJAX JSon JQuery 手写验证码

    本主题聚焦于“AJAX、JSON与JQuery”在实现手写验证码中的应用。AJAX（Asynchronous JavaScript and XML）是用于创建动态网页的技术，它允许页面在不刷新的情况下与服务器交换数据并更新部分网页内容。JSON...

    ASP.Net手写分页

    首先，让我们深入理解ASP.NET中的分页实现。通常，我们可以使用两种方法：服务器端分页和数据库分页。服务器端分页是在服务器上加载所有数据，然后根据当前页码筛选显示的部分；而数据库分页则是在数据库层面进行...

    gridview和dataList手写分页

    在客户端，可以使用AJAX技术实现无刷新分页，提高用户体验。 5. 代码重用：为了提高代码的可维护性和复用性，可以封装这些逻辑到一个自定义控件或用户控件中。这样，只需要在不同的页面引用这个控件，就能实现分页...

    我手写的JSP分页，对于初学MVC的人会有所帮助

    在这个项目中，你将找到一个自编的JSP分页实现，它可能包括了分页逻辑、请求处理和数据显示等关键部分。 **MVC模式** 是软件工程中的一种设计模式，常用于Web开发，将业务逻辑、数据和用户界面分离。Model负责处理...

    .NET手写代码Ajax实现无刷新

    在.NET开发中，Ajax（Asynchronous JavaScript and XML）技术被广泛用于实现页面的无刷新更新，从而提升用户体验。Ajax的核心思想是通过JavaScript在后台与服务器进行异步通信，无需整个页面刷新，仅更新部分DOM元素...

    ajax手写代码应用

    在IT行业中，Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。Ajax的核心是利用JavaScript与服务器进行异步数据交换，增强了用户体验，使得页面交互更加流畅。...

    oracle ODBC桥接连接+手写jsp分页

    在实际开发中，还可以利用Servlet、JSTL（JavaServer Pages Standard Tag Library）或第三方库如MyBatis等简化分页实现。例如，JSTL的`&lt;c:forEach&gt;`标签可以方便地遍历页码，而MyBatis的`&lt;select&gt;`标签可以轻松配置...

    HTML+AJAX(手写ajax)显示数据库数据

    而AJAX（异步JavaScript和XML）是一种在不重新加载整个网页的情况下，更新部分网页的技术。这种技术使得用户界面更加响应，提升了用户体验。在这个项目中，我们将结合HTML和AJAX，通过C#后端代码来从数据库获取数据...

    手写js实现Ajax局部刷新技术

    国家电网的一个面试题，要求不使用ajax控件实现页面的局部刷新

    spring+Mybatis+ PageHelper实现分页

    接下来，我们将详细讲解如何利用这三个技术进行分页实现。 首先，我们需要了解`Spring`。Spring是一个开源框架，主要用于简化Java企业级应用的开发。它提供了依赖注入（Dependency Injection，DI）和面向切面编程...

    手写AJAX代码，实现Goog的搜效果

    AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这个技术在现代Web开发中扮演着至关重要的角色，它允许网页与服务器进行异步通信，提升了用户体验。通过...

    webAPP手写签名插件

    【标题】"WebAPP手写签名插件"是一款专为移动设备如iPad设计的轻量级组件，它允许用户在Web应用中进行自然的手写签名操作。这款插件基于广泛使用的JavaScript库JQuery构建，因此可以轻松地集成到现有的jQuery项目中...

Magicbox
Global site tag (gtag.js) - Google Analytics