`
lzj520
  • 浏览: 213441 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

081114 分页显示json数据

    博客分类:
  • Ajax
阅读更多
客户端使用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读取Json数据分页显示

    确保这三个部分协同工作,就可以实现一个完整的、支持键盘和滚轮翻页的JSON数据分页显示功能。 在实际应用中,还需要考虑数据的异步加载、错误处理、分页参数的持久化等复杂情况。但以上内容提供了一个基础的实现...

    bootstrap-table动态加载json数据并且支持分页

    Bootstrap Table是一种...本主题主要关注如何在Bootstrap Table中动态加载JSON数据并实现分页功能。 首先,我们需要理解Bootstrap Table的基本结构。一个基本的Bootstrap Table可以通过以下HTML代码创建: ```html ...

    jquery获取json数据的并分页案例

    本案例将深入探讨如何使用jQuery来获取JSON数据并实现分页功能,这对于网页应用的数据展示至关重要。 首先,理解JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它易于人阅读和编写,同时也易于...

    json表格数据分页切换代码.zip

    本示例是基于Angular框架实现的一个分页插件,帮助开发者有效地管理和显示大量JSON数据。 Angular是一款由Google维护的前端开发框架,它提供了丰富的功能和工具,用于构建高性能、响应式的Web应用。在处理表格数据...

    自己写的jQuery分页根据json分页

    在这个项目中,JSON数据用于承载服务器返回的分页信息,包括总条数、当前页、每页显示数量等,以及实际的数据内容。 实现jQuery分页的核心步骤如下: 1. **HTML结构**:首先,需要在HTML页面中设置一个容器,用于...

    json数据在Html页面格式化显示

    - **性能优化**:对于大型JSON数据,避免一次性渲染所有内容,可以使用分页或懒加载技术。 总结来说,"json数据在Html页面格式化显示"是一个常见的开发需求,它涉及到JSON解析、HTML生成、JavaScript事件处理和CSS...

    vuetableVuejs组件会自动从服务器请求JSON数据并将它们显示在html表可切换可扩展的分页组件

    2. **自动请求JSON数据**:Vuetable能够自动向服务器发起Ajax请求,获取JSON格式的数据。这得益于Vue.js的响应式系统,它可以监听数据变化并自动更新视图。用户只需配置API接口地址,Vuetable就能处理请求和响应,...

    ajax获取json数据使用jquery分页插件显示

    插件下载地址 http://www.jq22.com/jquery-plugins分页-2-...下载的插件用自带的数据是可以的,但是采用ajax获取的json数据的时候会报错,所以我对插件进行了修改,成功实现。这个例子希望大家看懂自己来该,照抄不了。

    jQuery json动态数据表格分页代码

    这个主题"jQuery json动态数据表格分页代码"聚焦于使用jQuery、PHP和AJAX来实现这一功能。以下是相关知识点的详细说明: 1. **jQuery**:jQuery是一个流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画和...

    jQuery json带分页的动态数据表格代码.zip

    这个压缩包"jQuery json带分页的动态数据表格代码.zip"包含了一个简单的JavaScript实现,它演示了如何从JSON文件中获取数据并将其显示在一个交互式的表格中。下面我们将详细探讨这一技术。 首先,jQuery是一个广泛...

    JqGrid 纯Json自带分页功能

    在这个场景中,我们将关注JqGrid如何利用纯JSON数据实现自动分页。 在Web开发中,分页是处理大量数据时非常重要的一个功能,它可以提升用户体验,避免一次性加载过多数据导致页面响应慢或浏览器崩溃。JqGrid支持...

    ext grid json分页显示

    4. 后端返回JSON数据到前端,EXT Grid解析JSON,渲染新的数据行,并更新分页状态。 5. 这样,用户就能看到动态加载的分页数据,而无需手动刷新整个页面。 标签"Ajax"强调了这种异步数据交互的方式。Ajax技术的核心...

    jquery json分页实例

    这个实例展示了如何结合jQuery的Ajax功能和JSON数据格式来实现无刷新分页,提高了用户界面的响应性和互动性。在实际项目中,还可以考虑添加缓存机制、错误处理、分页效果等增强功能,以进一步提升用户体验。

    AJAXjson分页

    在AJAX分页中,通常会有一个后台接口,这个接口接收前端发送的请求参数,如当前页数、每页显示条数等,然后返回相应的JSON数据。这些数据包含了当前页所需显示的信息。DEMO中的"data"部分就是模拟了这样的后台返回,...

    Jquery+Json实现无刷新分页插件

    总结来说,"Jquery+Json实现无刷新分页插件"是利用Jquery的事件处理和Ajax功能,结合Json数据格式,实现的一种高效、用户体验友好的分页解决方案。开发者可以通过这样的插件轻松地在自己的项目中实现动态分页,同时...

    json获取datatable后生成table分页显示

    在JavaScript中,JSON数据可以直接被解析为对象或数组,便于操作和使用。例如,一个简单的JSON数据可能如下所示: ```json { "data": [ { "id": 1, "name": "John Doe", "email": "john@example.com" }, { ...

    通过json进行传输数据的Js分页程序

    "通过json进行传输数据的Js分页程序"这个主题,涉及到的主要知识点包括JSON的基本概念、JSON与JavaScript的关系、JSON在数据传输中的应用以及JavaScript实现分页的原理。 首先,JSON是一种轻量级的数据交换格式,它...

    ExtJs学习资料22-从服务器获取JSON数据并分页处理.doc

    这个简单的示例展示了如何利用ExtJs从服务器获取JSON数据,并使用分页策略在GridPanel中显示。在实际项目中,你可能还需要考虑错误处理、用户交互、性能优化等方面的问题,以构建更加健壮和用户友好的数据展示界面。

    .NET利用jqury+ajax+json方式实现的数据分页

    在请求成功后,解析返回的JSON数据,并使用jQuery操作DOM,将数据插入到页面的适当位置。 7. **配置分页插件**: - 调用`jquery.pagination.js`的初始化方法,设置分页控件的样式、每页显示的按钮数量等属性,并...

    jsoneditor 后台管理展示Json数据的专用模板 (html + js +css)

    JSONEditor是一款强大的在线JSON编辑器,它以直观的树形图和代码视图形式呈现JSON数据,非常适合在后台管理系统中用于展示和编辑JSON结构。这个模板包含HTML、JavaScript(js)和CSS三个主要部分,提供了完整的前端...

Global site tag (gtag.js) - Google Analytics