读书人

分页展示json数据

发布时间: 2012-10-08 19:54:56 作者: rapoo

分页显示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> 

读书人网 >JavaScript

热点推荐