Struts 2 Jquery json浏览器端无刷新分页

最新推荐文章于 2024-09-24 09:03:08 发布
最新推荐文章于 2024-09-24 09:03:08 发布
阅读量1.4k 收藏
点赞数
分类专栏： java js 文章标签： jquery json struts 无刷新分页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xwqfudimo/article/details/8480450
版权
java 同时被 2 个专栏收录
3 篇文章 0 订阅
订阅专栏
js
2 篇文章 0 订阅
订阅专栏

要点：

    将分页功能写成函数，并在其中绑定按钮的事件，每次点击都会“回调”分页函数重新生成表格和绑定分页按钮的事件。

 

 

所需jar包：

 

 

jsp文件customerSearch.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<link href="css/styles.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
	$(function($){
		
		var renderAvai = function(avai) {
			if(avai == true) {
				return "<font color='green'>是</font>";
			}
			else {
				return "<font color='red'>否</font>";
			}
		}
		
		
		
		$("#search").click(function(){
			var searchKey = $("#youknow").val();
			var type = $("input:checked").val();
			if(searchKey.trim() == "") {
				Ext.MessageBox.alert("<font color='green'>温馨提示</font>", "请输入搜索的内容！");
			}
			else {
				if(type == 'id') {
					searchKey = parseInt(searchKey);
					if(isNaN(searchKey)) {
						Ext.MessageBox.alert("<font color='green'>温馨提示</font>", "请输入数字类型的编号！");
						return;
					}
				}
			
				$.post("/mis/happy/customerSearch", {searchKey:searchKey, type:type},function(data){
					var result = $("#result");
					result.empty();
					if(data==null) {
						result.append("没有搜索到相应的任何数据！");
					}
					else {
						
						var ret = "<table id='mytable'><tr align='center'><th>客户编号</th><th>客户名称</th><th>客户地址</th><th>邮编</th><th>电话</th><th>联系人</th><th>联系电话</th><th>银行</th><th>银行账号</th><th>Email</th><th>传真</th><th>有效性</th></tr>";
						
						if(type== 'id') {
							ret += "<tr align='center'><td>"+ data.id + "</td><td>"+ data.name +"</td><td>"+data.address+"</td><td>"+data.postcode +"</td><td>"+ data.telephone + "</td><td>"+data.connectionPerson
							+"</td><td>"+data.connectPhone+"</td><td>"+ data.bank + "</td><td>"+ data.account+"</td><td>"+data.email+"</td><td>"+ data.fax+ "</td><td>" +renderAvai(data.available)+ "</td></tr>";
							
							ret += "</table>";
							result.append(ret);
						}
						else {
							if(data.length > 5) {
								var pageSize = 5;
								var curPage = 1;
								var pageNum = Math.ceil(data.length/pageSize);
								
								//分页函数
								var doPage = function(offset, limit, cp) {
									var retdata = "<table id='mytable'><tr align='center'><th>客户编号</th><th>客户名称</th><th>客户地址</th><th>邮编</th><th>电话</th><th>联系人</th><th>联系电话</th><th>银行</th><th>银行账号</th><th>Email</th><th>传真</th><th>有效性</th></tr>";
									retdata += "搜索到 " + data.length + " 条数据,共 "+ cp + "/"+ pageNum +" 页<br/>";
									
									if(limit >= data.length) limit = data.length-1;
									for(var i=offset; i<=limit; i++) {
										retdata += "<tr align='center'><td>"+ data[i].id + "</td><td>"+ data[i].name +"</td><td>"+data[i].address+"</td><td>"+data[i].postcode +"</td><td>"+ data[i].telephone + "</td><td>"+data[i].connectionPerson
												+"</td><td>"+data[i].connectPhone+"</td><td>"+ data[i].bank + "</td><td>"+data[i].account+"</td><td>"+data[i].email+"</td><td>"+ data[i].fax+ "</td><td>" +renderAvai(data[i].available)+ "</td></tr>";
									}
									retdata += "</table><br/>";
									
									//最多显示显示10个按钮，如果页码大于5，则显示所在页码的前5页和后5页
									var btnNum = 10;
									var halfBtnNum = btnNum / 2;
									var btnStart = 1;
									var btnEnd = pageNum;
									if(pageNum > btnNum && cp > halfBtnNum) {
										btnStart = cp - halfBtnNum;
										btnEnd = cp + halfBtnNum;
										if(btnEnd > pageNum) btnEnd = pageNum;
									}									
									
									retdata += "<button id='first'>首页</button>  ";
									for(var j=btnStart; j<=btnEnd; j++) {
										if(j == cp) {
											retdata += "<button class='page'><font color='red'>[" + j + "]</font></button>  ";
										}
										else {
											retdata += "<button class='page'>" + j + "</button>  ";
										}
									}
									retdata += "<button id='prev'>上一页</button>  <button id='next'>下一页</button>  ";
									result.empty();
									result.append(retdata);
									
									$(".page").click(function(){
										var cpage = $(this).text();
										var start = (cpage-1)*pageSize;
										var end = cpage*pageSize - 1;
										if(end >= data.length) end = data.length-1;
										
										//回调分页函数
										doPage(start, end,cpage);
									});
									
									$("#prev").click(function(){
										cp = cp - 1; 
										if(cp<1) cp = 1;
										var s = (cp-1)*pageSize;
										var e = cp*pageSize - 1;
										doPage(s, e, cp);
									});
									
									$("#next").click(function(){
										cp = cp + 1; 
										if(cp>pageNum) cp = pageNum;
										var s = (cp-1)*pageSize;
										var e = cp*pageSize - 1;
										doPage(s, e, cp);
									});
									
									$("#first").click(function(){
										doPage(0, pageSize-1,1);
									});
								}
								
								//页面加载时显示第一页
								doPage(0, pageSize-1,curPage);

							}
							
							
							else {
								for(var i=0; i<data.length; i++) {
									ret += "<tr align='center'><td>"+ data[i].id + "</td><td>"+ data[i].name +"</td><td>"+data[i].address+"</td><td>"+data[i].postcode +"</td><td>"+ data[i].telephone + "</td><td>"+data[i].connectionPerson
											+"</td><td>"+data[i].connectPhone+"</td><td>"+ data[i].bank + "</td><td>"+ data[i].account+"</td><td>"+data[i].email+"</td><td>"+ data[i].fax+ "</td><td>" +renderAvai(data[i].available)+ "</td></tr>";
								} 
								ret += "</table>";
								result.append(ret);
							}
						}
					}
				},"json");
				
			}
		});
		
	});
</script>
</head>
<body>
<div align="center" style="margin-top:100px;">
请输入客户的名称或编号：<input type="text" size="20" id="youknow"/>  
<input type="radio" name="yourequire" value="name" checked/>名称  <input type="radio" name="yourequire" value="id"/>编号
   <input type="button" value="搜索客户" id="search"/> 
</div>

<div align="center" id="result" style="margin-top:130px;">

</div>
</body>
</html>

 

 

Action文件CustomerSearchAction.java:

package com.kevinxwq.mis.action;

import java.io.PrintWriter;
import java.util.List;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.kevinxwq.mis.model.market.Customer;
import com.kevinxwq.mis.util.GsonUtil;

public class CustomerSearchAction extends BaseAction {
	private static final long serialVersionUID = -5070584076543559999L;

	private String searchKey;
	private String type;
	
	
	public String getSearchKey() {
		return searchKey;
	}
	public void setSearchKey(String searchKey) {
		this.searchKey = searchKey;
	}
	public String getType() {
		return type;
	}
	public void setType(String type) {
		this.type = type;
	}
	
	public void searchCustomer() throws Exception {
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		
		if("name".equals(type)) {
			List<Customer> cs = this.marketService.searchCustomerByName(this.searchKey);
			if(cs.size() == 0) {
				out.write("itisnull");
				out.flush();
			}
			else {
				String str = GsonUtil.toJson(cs);
				out.write(str);
				out.flush();
			}
		}
		else {
			Customer c = this.marketService.searchCustomer(Integer.parseInt(this.searchKey));
			String str = GsonUtil.toJson(c);
			System.err.println(str);
			
			out.write(str);
			out.flush();
		}
	}
	
}



struts.xml片段：

<action name="customerSearch" class="com.kevinxwq.mis.action.CustomerSearchAction" method="searchCustomer">
  <interceptor-ref name="misInterceptor" /> 
  </action>

 

 

 

实体类Customer.java:

package com.kevinxwq.mis.model.market;

/*
 * 客户
 */
public class Customer {
	private int id;
	private String name;
	private String postcode;
	private String address;
	private String telephone;
	private String connectionPerson;
	private String connectPhone;
	private String bank;
	private String account;
	private String email;
	private String fax;
	private boolean available;
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPostcode() {
		return postcode;
	}
	public void setPostcode(String postcode) {
		this.postcode = postcode;
	}
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
	public String getTelephone() {
		return telephone;
	}
	public void setTelephone(String telephone) {
		this.telephone = telephone;
	}
	public String getConnectionPerson() {
		return connectionPerson;
	}
	public void setConnectionPerson(String connectionPerson) {
		this.connectionPerson = connectionPerson;
	}
	public String getConnectPhone() {
		return connectPhone;
	}
	public void setConnectPhone(String connectPhone) {
		this.connectPhone = connectPhone;
	}
	public String getBank() {
		return bank;
	}
	public void setBank(String bank) {
		this.bank = bank;
	}
	public String getAccount() {
		return account;
	}
	public void setAccount(String account) {
		this.account = account;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getFax() {
		return fax;
	}
	public void setFax(String fax) {
		this.fax = fax;
	}
	public boolean isAvailable() {
		return available;
	}
	public void setAvailable(boolean available) {
		this.available = available;
	}
	public Customer(int id, String name, String postcode, String address,
			String telephone, String connectionPerson, String connectPhone,
			String bank, String account, String email, String fax, boolean available) {
		super();
		this.id = id;
		this.name = name;
		this.postcode = postcode;
		this.address = address;
		this.telephone = telephone;
		this.connectionPerson = connectionPerson;
		this.connectPhone = connectPhone;
		this.bank = bank;
		this.account = account;
		this.email = email;
		this.fax = fax;
		this.available = available;
	}
	public Customer() {
		super();
	}
}

 


 

前台接收到的json片段：

[
{"id":12,"name":"谷歌1","postcode":"243100","address":"江苏省南京市","telephone":"6934234","connectionPerson":"吴伟","connectPhone":"15312312431","bank":"中国农业银行","account":"6222021324212342","email":"zy@gamil.com","fax":"010-234243","available":true},
{"id":13,"name":"谷歌2","postcode":"243100","address":"江苏省南京市","telephone":"6934234","connectionPerson":"吴伟","connectPhone":"15312312431","bank":"中国农业银行","account":"6222021324212342","email":"zy@gamil.com","fax":"010-234243","available":true},
{"id":14,"name":"谷歌3","postcode":"243100","address":"江苏省南京市","telephone":"6934234","connectionPerson":"吴伟","connectPhone":"15312312431","bank":"中国农业银行","account":"6222021324212342","email":"zy@gamil.com","fax":"010-234243","available":true},
{"id":15,"name":"谷歌4","postcode":"243100","address":"江苏省南京市","telephone":"6934234","connectionPerson":"吴伟","connectPhone":"15312312431","bank":"中国农业银行","account":"6222021324212342","email":"zy@gamil.com","fax":"010-234243","available":true},
{"id":16,"name":"谷歌5","postcode":"243100","address":"江苏省南京市","telephone":"6934234","connectionPerson":"吴伟","connectPhone":"15312312431","bank":"中国农业银行","account":"6222021324212342","email":"zy@gamil.com","fax":"010-234243","available":true},
{"id":17,"name":"谷歌6","postcode":"243100","address":"江苏省南京市","telephone":"6934234","connectionPerson":"吴伟","connectPhone":"15312312431","bank":"中国农业银行","account":"6222021324212342","email":"zy@gamil.com","fax":"010-234243","available":true},
{"id":18,"name":"谷歌7","postcode":"243100","address":"江苏省南京市","telephone":"6934234","connectionPerson":"吴伟","connectPhone":"15312312431","bank":"中国农业银行","account":"6222021324212342","email":"zy@gamil.com","fax":"010-234243","available":true}
...]


 

效果图：

 

 

     尝试过将分页函数写到独立的js外部文件中去，做成一个工具函数，但那样json数据data的特定属性(postcode,address等)就访问不到了，如果哪位朋友有更好的想法，欢迎教于在下，谢谢!

 

xwqfudimo
关注
专栏目录
Struts2 json 动态表格及分页
ironurbane的专栏
09-04 70
成的json的length进行操作。 有时间我会把相关代码整理一下，和大家一起交流。 动态生成表格，大多数都使用innerHTML属性，和innerHTML属性相关的标签最好不要是只读的，比如 COL,COLGROUP,FRAMESET,HTML,STYLE,TABLE,TBODY,TFOOT,THEAD,TITLE,TR 等等，否则IE下会报未知的运行时错误。而firefox一切正常。这种情况下可以用div或者其他一些标签代替即可。
java ajax json 分页_使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页
weixin_33805938的博客
02-23 213
先给大家展示下运行效果图：1.后台action产生json数据。List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate);int totalRows = blackList.size();StringBuffer sb = new StringBuffer();sb.append...
jQuery+AJAX+Struts实现无刷新分页
D.W 的专栏
04-13 2119
jQuery+AJAX+Struts实现无刷新分页 说明： 1．需要jQuery插件js文件； 2．使用myeclipse添加struts能力； 从前从客户端页面向服务器发送Ajax请求，需要在js中先创建XMLHttpRequest对象，对象创建好以后使用OPEN（'GET/POST',URL，同步/异步）设置提交方式，URL地址，使用同步还是异步方式。然后使用send(data)向服务
Struts2+jquery pagination插件无刷新分页
ld191474639的专栏
11-17 3796
在IE8和firefox下没有问题（其他的浏览器还没来得及测试），如果其他浏览器有问题只需要重写pagination.css就可以了 Action类 package com.data3; import com.data2.Databean; import com.opensymphony.xwork2.ActionSupport; public class PersonAction e
struts2 jquery ajax分页,手把手教你们通过jquery ajax调用查询java struts2后端数据+js拼接字符串...
weixin_42523326的博客
08-05 97
1.首先新建一个web项目，创建一个User实体package com.qm.entity;public class User {private String id;private String name;private String sex;private int age;public User() {}public User(String name, String sex, int age) ...
关于Struts2与Jquery实现无刷新分页的不解问题
JAVA我的最爱
11-03 87
     我最近正在做一个无刷新的网站管理后台，并把它作为我的毕业设计主题，不过在代码实现上遇到了点小问题，想向大家请教一二。我的设计思路大概是这样的：将后 台所生成的数据用JSON的格式输出，在前台借助JQUERY的AJAX功能将传过来的数据写出。这样的方式在实现数据的增、改、删功能上并不会很难，不 过在数据的查询方面便麻烦了，如何实现数据的无刷新分页呢？我查阅网上一些网友的做法，不过普遍发...
jquery ajax数据分页显示,基于Jquery+Ajax+Json实现分页显示
weixin_39864682的博客
08-05 459
1.后台action产生json数据。List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate);int totalRows = blackList.size();StringBuffer sb = new StringBuffer();sb.append("{\"totalCou...
java ajax json 分页,使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页.doc...
weixin_39926749的博客
08-05 246
使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页本文给大家介绍基于jquery+ajax+json实现数据分页显示，以及JAVA+JQuery实现异步分页，本文代码简单易懂，非常具有参考价值，感兴趣的朋友一起学习吧先给大家展示下运行效果图：1.后台action产生json数据。List blackList = blackService.getBlackInf...
struts jqery ajax 无刷新 分页
Java菜鸟
03-11 2832
一个简单的分页 jqery ajax 才开始学 ，写的不是很好 action  public String queryAllajax(){ ActionContext context = ActionContext.getContext(); HttpServletRequest request = ServletActionContext.getRequest();
struts2 spring2 ibatis2 jquery json 页面无刷新分页
12-12
Struts2、Spring2、iBatis2、jQuery 和 JSON 是构建现代Web应用程序的重要技术栈。这个项目似乎演示了如何利用这些技术实现页面无刷新分页功能，这在提升用户体验和提高网页性能方面非常关键。下面我们将详细探讨...
struts2 jquery无刷新分页
06-03
Struts2 jQuery无刷新分页是一种常见的Web应用技术，它结合了Struts2框架、jQuery库和MySQL数据库，实现了一种高效、用户友好的页面显示方式。无刷新分页允许用户在浏览大量数据时，无需等待整个页面重新加载，只...
jQuery+Struts+Ajax无刷新分页
04-13
**jQuery+Struts+Ajax无...总结，这个"jQuery+Struts2+Ajax无刷新分页"项目展示了如何结合现代前端技术和后端框架实现高效、友好的Web应用。通过学习和实践，开发者可以更好地理解和掌握这些技术在实际项目中的应用。
struts2 jquery 分页
08-23
在"Struts2 jQuery分页"这个主题中，我们主要讨论如何在Struts2应用中利用jQuery实现数据的分页显示。分页是大型Web应用程序中常见的功能，它能够帮助用户更有效地浏览和管理大量数据，提高用户体验。 首先，我们...
递归将树转化成json字符串
求知若饥，虚怀若愚
05-12 3139
Tree.java： package tree; import java.util.ArrayList; import java.util.List; class Node { private int data; private Node parent; private List children = new ArrayList(); private Node rightSiblin
java使用栈和逆波兰表达式实现四则运算
求知若饥，虚怀若愚
05-06 1014
Stack.java： package calculator; import java.util.LinkedList; public class Stack { private LinkedList stack = new LinkedList(); public void push(String str) { stack.push(str); } public Str
适用于QF的存档系统
2301_80005044的博客
09-20 411
今天分享一个适用于QF的存档系统这个系统的优点为1、轻量化，总共代码不超过400行2、自动化，基于QF框架，自动注入值缺点：1、不能序列化Unity内部类型，如Vector2、需要给能被序列化的类加上【Serialize】属性。
JS的基础语法
最新发布
weixin_61898502的博客
09-24 994
空(null)
Struts2.1.6+jQuery Flexigrid 实现JSON分页与Ajax交互
本文档主要介绍了如何在Struts2.1.6框架下结合Spring、Hibernate、jQuery、Flexigrid、Thickbox和MySQL技术实现动态数据分页显示。以下是详细步骤和关键知识点： 1. **技术栈组合**: - Struts2.1.6: 作为Web MVC...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值