我最近正在做一个无刷新的网站管理后台,并把它作为我的毕业设计主题,不过在代码实现上遇到了点小问题,想向大家请教一二。我的设计思路大概是这样的:将后
台所生成的数据用JSON的格式输出,在前台借助JQUERY的AJAX功能将传过来的数据写出。这样的方式在实现数据的增、改、删功能上并不会很难,不
过在数据的查询方面便麻烦了,如何实现数据的无刷新分页呢?我查阅网上一些网友的做法,不过普遍发现他们的代码有点繁琐也不符合我设计初衷。通过查看
JQUERY的API我自己想出了一种可行的方案(目前已经实现部分功能):在查询的页面中先创建一个无数据的表格样式,通过JQUERY的CLONE功
能在查询数据时复制这个表格的样式同时将后台传过的数据填充其中和移除那行无数据的样式表格。
前台的JS相关代码如下:
<script type="text/javascript">
// 显示所查询的数据
function dataSource(){
$.ajax({
url:"${pageContext.request.contextPath}/jsonservlet",
type:"post",
data:{},
dataType:"json",
error:function(){alert("服务器通讯失败,请稍后再刷新页面。 ^_^");},
success:function(data){
insertTr(data);
}
});
}
// 查询数据的分页跳转
function goPage(thePage){
$.ajax({
url:"${pageContext.request.contextPath}/jsonservlet",
type:"post",
data:{page:thePage},
dataType:"json",
error:function(){alert("服务器通讯失败,请稍后再刷新页面。 ^_^");},
success:function(data){
insertTr(data);
}
});
}
// 填充表格中的每行数据
function insertTr(data) {
//读取tr里数量
var r = $("#datasource tr").size();
var list = data.dataSource;
$.each(list, function(i, r) {
//克隆已有的表格样式及属性
var row = $("#source").clone();
//将数值填充至表格中
row.find("#id").text(r.id)
row.find("#name").text(r.name);
row.find("#time").text(r.time);
//将此行添加到表格中
row.appendTo("#datasource");
});
// 移除第一行,因为它只有样式没有数据
$("#datasource").children("tr:first").remove();
}
</script>
通过实践发现这个方案是可行的,不过出现了一个问题:在数据翻页
时如何将当前的数据移除并将新数据填充到页面中呢?(即: 在转到第2页时把当前第1页的数据移除并填充第2页的数据)我尝试了很多方法可仍是未能实现我想要的无刷新的分页效果,希望大家能帮我看看是哪里出问题了。谢谢。
PS: 我做了个小小的示例,大家可以下载回去帮我修改试试。
分享到:
相关推荐
jquery java struts2 实现分页 非常好看 可自定义修改样式
struts2 spring2 ibatis2 jquery json 页面无刷新分页.有问题联系QQ:765374922
struts2+jquery+mysql写的一个简单的无刷新分页。
使用myeclipse开发的jQuery加上struts的ajax无刷新分页,一个完整的demo,经测试,可运行。里面的数据是通过自己的拼凑的JSON数据来实现的分页。
Struts2 Jquery 实现Ajax无刷新验证用户名是否存在,网上这样的例子太少了!许多下载的项目都存在实际的问题,所以自己写了一个比较全面的例子。兼容目前主流浏览器,欢迎大家下载
以struts2标签的形式提供分页功能,使用简便,杜绝手工去拼分页标签的样式。目前提供了两种方式,直接原生的jquery调用,使用seajs模块化的方式。 源码地址:http://code.google.com/p/paginationex/source/checkout
使用Struts2和jQuery EasyUI实现简单CRUD系统
STRUTS2+HIBERNATE分页 实现代码详细的分页实现代码实现代码详细的分页实现代码实现代码详细的分页实现代码实现代码详细的分页实现代码
NULL 博文链接:https://left-jessica.iteye.com/blog/739878
struts+jquery实现无刷新验证用户名是否存在,代码,工具包,配置文件均在,创建项目贴上代码即可。
Struts2整合jQuery实现Ajax功能
用Struts2+mysql实现的简单信息录入,分页查询
这个struts2 实例是通过用js的一个框架jquery来实现的ajax,jquery真的不错,其中的数据传输格式用的时json,用了一个json_lib的jar包,所有所需的包都在了,下载后就能运行,对于初学struts2与ajax的朋友很有点帮助...
struts2-jquery-plugin-3.1.0.jar
Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON
struts2 jquery 分页
struts2结合easyui实现增删改分页排序
通过网上搜集资料,实现了一个struts2+hibernate+pager-taglib的分页小例子,大家在运行例子前,请一定要看包里面的readme.txt文件。里面有环境的搭建。