客户端使用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数据分页显示功能。 在实际应用中,还需要考虑数据的异步加载、错误处理、分页参数的持久化等复杂情况。但以上内容提供了一个基础的实现...
Bootstrap Table是一种...本主题主要关注如何在Bootstrap Table中动态加载JSON数据并实现分页功能。 首先,我们需要理解Bootstrap Table的基本结构。一个基本的Bootstrap Table可以通过以下HTML代码创建: ```html ...
本案例将深入探讨如何使用jQuery来获取JSON数据并实现分页功能,这对于网页应用的数据展示至关重要。 首先,理解JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它易于人阅读和编写,同时也易于...
本示例是基于Angular框架实现的一个分页插件,帮助开发者有效地管理和显示大量JSON数据。 Angular是一款由Google维护的前端开发框架,它提供了丰富的功能和工具,用于构建高性能、响应式的Web应用。在处理表格数据...
在这个项目中,JSON数据用于承载服务器返回的分页信息,包括总条数、当前页、每页显示数量等,以及实际的数据内容。 实现jQuery分页的核心步骤如下: 1. **HTML结构**:首先,需要在HTML页面中设置一个容器,用于...
- **性能优化**:对于大型JSON数据,避免一次性渲染所有内容,可以使用分页或懒加载技术。 总结来说,"json数据在Html页面格式化显示"是一个常见的开发需求,它涉及到JSON解析、HTML生成、JavaScript事件处理和CSS...
2. **自动请求JSON数据**:Vuetable能够自动向服务器发起Ajax请求,获取JSON格式的数据。这得益于Vue.js的响应式系统,它可以监听数据变化并自动更新视图。用户只需配置API接口地址,Vuetable就能处理请求和响应,...
插件下载地址 http://www.jq22.com/jquery-plugins分页-2-...下载的插件用自带的数据是可以的,但是采用ajax获取的json数据的时候会报错,所以我对插件进行了修改,成功实现。这个例子希望大家看懂自己来该,照抄不了。
这个主题"jQuery json动态数据表格分页代码"聚焦于使用jQuery、PHP和AJAX来实现这一功能。以下是相关知识点的详细说明: 1. **jQuery**:jQuery是一个流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画和...
这个压缩包"jQuery json带分页的动态数据表格代码.zip"包含了一个简单的JavaScript实现,它演示了如何从JSON文件中获取数据并将其显示在一个交互式的表格中。下面我们将详细探讨这一技术。 首先,jQuery是一个广泛...
在这个场景中,我们将关注JqGrid如何利用纯JSON数据实现自动分页。 在Web开发中,分页是处理大量数据时非常重要的一个功能,它可以提升用户体验,避免一次性加载过多数据导致页面响应慢或浏览器崩溃。JqGrid支持...
4. 后端返回JSON数据到前端,EXT Grid解析JSON,渲染新的数据行,并更新分页状态。 5. 这样,用户就能看到动态加载的分页数据,而无需手动刷新整个页面。 标签"Ajax"强调了这种异步数据交互的方式。Ajax技术的核心...
这个实例展示了如何结合jQuery的Ajax功能和JSON数据格式来实现无刷新分页,提高了用户界面的响应性和互动性。在实际项目中,还可以考虑添加缓存机制、错误处理、分页效果等增强功能,以进一步提升用户体验。
在AJAX分页中,通常会有一个后台接口,这个接口接收前端发送的请求参数,如当前页数、每页显示条数等,然后返回相应的JSON数据。这些数据包含了当前页所需显示的信息。DEMO中的"data"部分就是模拟了这样的后台返回,...
总结来说,"Jquery+Json实现无刷新分页插件"是利用Jquery的事件处理和Ajax功能,结合Json数据格式,实现的一种高效、用户体验友好的分页解决方案。开发者可以通过这样的插件轻松地在自己的项目中实现动态分页,同时...
在JavaScript中,JSON数据可以直接被解析为对象或数组,便于操作和使用。例如,一个简单的JSON数据可能如下所示: ```json { "data": [ { "id": 1, "name": "John Doe", "email": "john@example.com" }, { ...
"通过json进行传输数据的Js分页程序"这个主题,涉及到的主要知识点包括JSON的基本概念、JSON与JavaScript的关系、JSON在数据传输中的应用以及JavaScript实现分页的原理。 首先,JSON是一种轻量级的数据交换格式,它...
这个简单的示例展示了如何利用ExtJs从服务器获取JSON数据,并使用分页策略在GridPanel中显示。在实际项目中,你可能还需要考虑错误处理、用户交互、性能优化等方面的问题,以构建更加健壮和用户友好的数据展示界面。
在请求成功后,解析返回的JSON数据,并使用jQuery操作DOM,将数据插入到页面的适当位置。 7. **配置分页插件**: - 调用`jquery.pagination.js`的初始化方法,设置分页控件的样式、每页显示的按钮数量等属性,并...
JSONEditor是一款强大的在线JSON编辑器,它以直观的树形图和代码视图形式呈现JSON数据,非常适合在后台管理系统中用于展示和编辑JSON结构。这个模板包含HTML、JavaScript(js)和CSS三个主要部分,提供了完整的前端...