关于Struts2与Jquery实现无刷新分页的不解问题

     我最近正在做一个无刷新的网站管理后台，并把它作为我的毕业设计主题，不过在代码实现上遇到了点小问题，想向大家请教一二。我的设计思路大概是这样的：将后 台所生成的数据用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: 我做了个小小的示例，大家可以下载回去帮我修改试试。

评论

8 楼 chenletian006908 2013-06-18  

可以把 源码 发下一吗？或者在哪里下载

7 楼 ning5566 2011-11-09  

非常好 感谢了。。。

6 楼 luokery 2011-06-22  

这个是struts2么... 继续找呀找...

5 楼 luokery 2011-06-22  

senhui19 写道

还是自己动手“丰衣足食”啊，通过一系列调试终于是可以实现了啦，只要在var r = $("#datasource tr").size(); 下添加一行代码就行了，代码如下：

if(r > 1){
     $("#datasource").find("tr:not(:first)").remove();
}

现在把代码贡献出来，有需要的朋友可以参考一下，呵呵~~~

不行啊, 第2面以后, 都保留了第1行.

			function insertTr(data) {
				var r = $("#datasource tr").size();
				var num = 0;
				if(r < 1){
					num = 1;
				}else if(r > 1){
					
				}
				//$("#showmessage").text("r=["+r+"]" + $("#datasource").find("tr:first").html()); 
				
				var list = data.dataSource;
				
				$.each(list, function(i, r) {
					var row = $("#source").clone();
					if(num == 0){
						//$("#datasource").find("tr").remove();
						$("#datasource").each(function(){
	           				$(this).find("tr").remove();
	    				});
						num = 1;
					}
					row.find("#id").text(r.id)
					row.find("#name").text(r.name);
					row.find("#time").text(r.time);
					row.appendTo("#datasource");
				});

			}

上面是我修改后的, 我的IE8.0

4 楼 EchoZhouYou 2011-03-09  

支持JQuery,下了去研究，有机会talk下

3 楼 busing 2010-12-05  

呵呵  我们现在都用ext了  分页很简单

2 楼 senhui19 2010-11-05  

还是自己动手“丰衣足食”啊，通过一系列调试终于是可以实现了啦，只要在var r = $("#datasource tr").size(); 下添加一行代码就行了，代码如下：

if(r > 1){
     $("#datasource").find("tr:not(:first)").remove();
}

现在把代码贡献出来，有需要的朋友可以参考一下，呵呵~~~

1 楼 senhui19 2010-11-03  

自己先顶一个，有谁熟悉JQUERY的看看