分页展示json数据-JavaSript-爱易网页

分页展示json数据

日期：2014-05-16　浏览次数：20292 次

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

分页展示json数据

相关资料更多>

推荐阅读更多>