客户端使用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数据分页显示
插件下载地址 http://www.jq22.com/jquery-plugins分页-2-...下载的插件用自带的数据是可以的,但是采用ajax获取的json数据的时候会报错,所以我对插件进行了修改,成功实现。这个例子希望大家看懂自己来该,照抄不了。
vue-table - Vue.js组件会自动从服务器请求(JSON)数据,并将它们显示在html表可切换/可扩展的分页组件
jQuery datatables小实例demo可实现ajax数据请求对接,模拟访问json文件,回显数据展示,可搜索、排序、自定也显示条数据、分页,动态表格代码。
html前端获取后端js的数据,实现到html表格,并且实现表格分页显示,分页显示原理是要显示那一页数据就从后端获取需要显示页的数据,不会一次性获取全部数据,减小流前端的压力。后端使用js+express,读取csv文件...
*jQuery通过json方法获取datatable数据 *将datatable数据转换成table *将table分页显示
通过 json 接收后台数据,在前台分页显示数据,这只是我整的一个例子哦,就是 dwr+ext
Ajax无刷新分页(jQuery+Json) 做了一个用jQuery来实现的用户控件,VS2008+Access jQuery+ashx+JSON 用ashx来接收请求,数据格式为JSON 实现了批量(选择)操作,编辑接口(反回两个值给用户进行自定义操作) 删除,...
这是关于jquery json大数据量的分页显示的一个demo,希望更多的人能够学会它,谢谢!
内容索引:脚本资源,Ajax/JavaScript,分页,滚动分页,Json Js读取json数据进行分页的一个实例,可能与其它的JS分页不太一样,本分页是采用滚动鼠标中轮的方式分页,也就是当显示的内容不完整时,滚动中轮就可以改变...
用jQuery,结合PHP和Mysql,通过获取json数据实现网页分页数据
*适用于查询,一次加载,减少访问服务器频率 *使用json获取datatable数据 *将datatable转换为table *将table分页 *checkbox全选
1.列自定义(宽度,可见性) 2.每页显示条目(pageCount) 3.防重复提交 4.数据真分页 5.百分比展示(主要看renderTo对象的定义) 6.使用简单,服务端只需处理 start ,limit两个参数用在dao查询即可
用layui前端布局, C#MVC后端调用数据写的数据表格,后端往前端传入json格式数据,动态绑定,局部刷新,分页,数据库用的petapoco,功能虽小,涉及的东西不少,可以研究研究,只需将web.config里的服务器地址的...
后台action产生json数据,js获取json数据分页显示,详细的示例代码如下,需要的朋友可以学习下
此工具的目的是实现网页数据分页显示完全脱离服务器,单纯使用js实现,现在功能还比较简单,只能单纯显示数据,有其他需求可以联系探讨。 工具例子使用ajax获取列表数据,当然其他形式也行,最后应该把数据转换成...
jQuery datatables小实例demo可实现ajax数据请求对接,模拟访问json文件,回显数据展示,可搜索、排序、自定也显示条数据、分页,动态表格代码。
thinkphp+ajax无刷新分页,方便快捷,简单易行
Ajax无刷新分页(jQuery+Json) 做了一个用jQuery来实现的用户控件,VS2008+Access 只用来玩玩.所以就用Access数据库了 jQuery+ashx+JSON 用ashx来接收请求,数据格式为JSON 实现了批量(选择)操作,编辑接口(反回...
后台action产生json数据。 List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate); int totalRows = blackList.size(); StringBuffer sb = new StringBuffer(); sb.append({...