分页显示json数据
客户端使用jquery,设置了上一页和下一页作为分页并显示总页数和当前页数,并把返回的json用div+span显示:
$.ajaxSetup({beforeSend: function() {$("#back").html('<img src="loading.gif">');},complete: function() {},error:function(){$("#back").html('<font color="red">read data error..</font>');},method: "post",timeout:50000,cache:false});function loaddatapage(page){$("#detail").html('');$.ajax({dataType:'json',url:"<%=request.getContextPath()%>/jiner/jiner.action",data:"pagenum=" + page,success:function(data){$("#detail").append('<p style="color:white;background-color:blue;font:bold;"><span style="color:white;">金额</span><span style="color:white;">时间</span><span style="color:white;">操作员</span><span style="color:white;">所在IP</span></span></p>');$.each(data.list,function(i,n){$("#detail").append('<p><span>'+ data.list[i][0] + '</span><span>' + data.list[i][2] + '</span><span>' + data.list[i][1] + '</span><span>' + data.list[i][3] + '</span></p>');})var prepage=page-1;var nextpage=page+1;if(prepage<=0){prepage=1;}if(nextpage>data.amountPage){nextpage=data.amountPage;}$("#detail").append('<p style="background-color:#CAD7F7;"><span style="font:blod;margin-top:20px;">当前页:'+ page + '/'+ data.amountPage + '</span><span><button style="font:12px; width:60px; height:19px; FONT-SIZE: 12px; " onclick="loaddatapage('+ prepage +')">上一页</button><button style="font:12px; width:60px; height:19px; FONT-SIZE: 12px; " onclick="loaddatapage('+ nextpage +')">下一页</button></span></p>');$("#back").html('')}});}服务器端使用比较普遍的分页方式,使用hibernate+struts2:
ACTION中部分代码:
private List list; private int PageSize=10,amountPage; private String pagenum; public String list() throws Exception { int s = JinerManager.CountCreditDetail(); int a = s%PageSize; if(a!=0){ amountPage = s/PageSize+1; }else{ amountPage = s/PageSize; } this.setAmountPage(amountPage); this.setPagenum(pagenum); this.setList(JinerManager.Find(pagenum,PageSize)); return SUCCESS; }JinerManager.Find(pagenum,PageSize)调用了service,使用hibernate的数据库分页查找数据: public List FindCreditDetail(String pagenum,int pagesize){ Query queryObject = getSession().createSQLQuery("select i_add_money ,s_user_id,to_char(d_date,'yyyy-mm-dd hh24:mi:ss' ),s_ip from jiner t order by i_id desc"); if (pagenum == null|pagenum == ""){ queryObject.setFirstResult(0); queryObject.setMaxResults(pagesize); }else{ try{ Integer p = (Integer.valueOf(pagenum)-1) * pagesize; queryObject.setFirstResult(p); queryObject.setMaxResults(pagesize); }catch (Exception e){ queryObject.setFirstResult(0); queryObject.setMaxResults(pagesize); } } List result = queryObject.list(); return result; }struts2配置,使用了jsonplugin:
<package name="jiner" extends="json-default" namespace="/jiner"> <action name="jiner" class="com.pixel.websino.admin.web.action.CreditdetailAction"> <result type="json"/> </action> </package>