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

来源：互联网发布：apache url重写规则编辑：程序博客网时间：2024/04/28 22:21

要点：

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

所需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等)就访问不到了，如果哪位朋友有更好的想法，欢迎教于在下，谢谢!