在web应用程序方面的it工作者,一定对分页熟悉的不能再熟悉了,但是在某些特殊的情况下,我们是否能够实现分页呢? 例一:页面中有视频播放以及评论,我们想查看最新的评论,就必须要刷新页面,这样一来视频就会重新加载并播放,这不是我们想得到的结果,我们需要使用ajax技术,动态的获取服务器的数据,为了解决这样的问题,特用jquery来实现此功能,jquery实际上是对javascript进一步的封装,具有更好的对dom对象操作的能力,并且有比javascript更先进的技术,使用ajax更为方便简洁。接一下一步一步尝试用jquery来实现动态分页。

 

假设: 页面内容如下

 

<table id="tbl">
     <tr>
              <td class="user" style="color:red;">用户名</td>
              <td style="color:green;">密码</td>
 
              <!-- 此处使用sturts1标签  -->
              <bean:define id="listBean" name="list" />
     	      <logic:present name="listBean">
		      <logic:iterate id="item" name="listBean">
			      <tr>
				 <!-- 带有样式及属性的表格  -->
				 <td style="text-align:right;">${item.userName}</td>
				 <td><a href="index.jsp" target="_blank">${item.passWord}</a></td>

				 <input type="hidden" class="token"/>
			      </tr>
		      </logic:iterate>
	      </logic:present>
              
</table>

 

页面内容为两列N行的表格,第一列为用户名,第二列为密码,循环显示出一页能显示出的最多

需要说明,其中隐藏文本域token的作用,稍后讲解

 

以下为jquery代码

 

//执行
		function page_go()
		{
			var pageNow = $("#txtPageNow").val();
			var pageSize = $("#txtPageSize").val();
			$.ajax({
                             url: "List.action",
                             data: "method=setPageSize&pageNow="+pageNow+"&pageSize="+pageSize,
                             type: "post",
                             success: function (msg) {
               	              $(".token").parent().parent().remove();
               	              $("#tbl").append(msgs);
                             }
                           });
		}

 

当用户点击下一页或上一页的时候,触发此方法,获得当前页号和页大小后作为参数请求action,

当请求成功时,服务器返回数据,这时token隐藏文本域起到了至关重要的作用,它帮助我们定位了已经在页面的每一条数据,我们通过$(".token").parent().parent().remove();可以删除非第一个tr外的其他所有tr。$(".token")获取了所有引用了token类样式的dom对象,之后我们删除他的父节点<td>的父节点<tr>,这样已有的数据就被清楚,$("#tbl").append(msgs);之后把服务器响应的信息追加在id为tbl,可是服务器会响应什么样的信息呢? 请看:

 

/**
	 * jquery分页
	 */
	public ActionForward setPageSize(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws Exception {	

		//DAO层查询list返回到action中
		List list =petListDAO.getResult(pageNow, pageSize);

		StringBuffer buffer = new StringBuffer();
		for (Object object : list) {
			Userinfo user = (Userinfo)object;

			buffer.append("<tr>");
			buffer.append("<!-- 带有样式及属性的表格  -->");
			buffer.append("<td style=\"text-align:right;\">").append(user.getUserName).append("</td>")
			buffer.append("<td><a href=\"index.jsp\" target=\"_blank\">").append(user.getPassWord).append(</td>);
			buffer.append("<input type=\"hidden\" class=\"token\"/>");
			buffer.append("</tr>");
		}

		PrintWriter out = response.getWriter();
		out.print(buffer.toString());
		out.flush();
		out.close();
		return null;
	}

 

在action中,直接把数据连标签一起返回给jquery callback function。、

这样就实现了jquery分页,在客户端无刷新效果,大大增加了客户体验,非常的好