在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分页,在客户端无刷新效果,大大增加了客户体验,非常的好