struts2+spring3+ibatis2.3+jquery_ajax1.7

struts2+spring3+ibatis2.3+jquery_ajax1.7合成
实现页面无刷新分页显示数据
演示效果图：
[img]http://dl.iteye.com/upload/picture/pic/120568/1fec5239-3c53-3524-b30a-b51f8946a345.png[/img]
工程目录：
[img]http://dl.iteye.com/upload/picture/pic/120564/64b17e54-860c-3b43-86cf-fd85e550e8be.png[/img]
[img]http://dl.iteye.com/upload/picture/pic/120566/829811a1-dc97-3d3a-bb8b-cc56604ff321.png[/img]
部分代码展示：
[color=red][b]Emp[/b][/color]

package com.ssij.model;

import java.util.Date;
/**
 * emp entity
 * @author qiyang
 *
 */
public class Emp {

	private int empNo;

	private String eName;

	private double sal;

	private Date hireDate;


	public Emp() {
		super();
	}
	public Emp(String eName, double sal, Date hireDate) {
		super();
		this.eName = eName;
		this.sal = sal;
		this.hireDate = hireDate;
	}
	public Emp(int empNo, String eName, double sal, Date hireDate) {
		super();
		this.empNo = empNo;
		this.eName = eName;
		this.sal = sal;
		this.hireDate = hireDate;
	}
	public int getEmpNo() {
		return empNo;
	}
	public void setEmpNo(int empNo) {
		this.empNo = empNo;
	}
	public String geteName() {
		return eName;
	}
	public void seteName(String eName) {
		this.eName = eName;
	}
	public double getSal() {
		return sal;
	}
	public void setSal(double sal) {
		this.sal = sal;
	}
	public Date getHireDate() {
		return hireDate;
	}
	public void setHireDate(Date hireDate) {
		this.hireDate = hireDate;
	}
	@Override
	public String toString() {
		return empNo+", "+eName+", "+sal+", "+hireDate;
	}

}

[color=red][b]EmpDao [/b][/color]

package com.ssij.dao;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.orm.ibatis.support.SqlMapClientDaoSupport;

import com.ssij.model.Emp;

public class EmpDao extends SqlMapClientDaoSupport{
	/**
	 * find all emp info
	 * @return
	 */
	@SuppressWarnings("unchecked")
	public List<Emp> findEmps(int pageSize,int pageNow){
		System.out.println(" - dao find emps - ");
		//sql语句的参数集
		Map<String, Object> parameterMap = new HashMap<String, Object>();
		parameterMap.put("p1", pageNow*pageSize);
		parameterMap.put("p2", (pageNow-1)*pageSize);
		//使用模板获取数据
		List<Emp> emps = this.getSqlMapClientTemplate().queryForList("findAllEmps",parameterMap);
		return emps;
	}
	/**
	 * add emp info
	 * @param emp
	 */
	public void addEmp(Emp emp){

	}

	/**
	 * delete from emp info by empNo
	 */
	public void delEmpByEmpNo(int empNo){

	}
}

[color=red][b]EmpService [/b][/color]

package com.ssij.service;

import java.util.List;

import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

import com.ssij.dao.EmpDao;
import com.ssij.model.Emp;

@Transactional(propagation=Propagation.REQUIRED)
public class EmpService {

	private EmpDao empDao;

	public void setEmpDao(EmpDao empDao) {
		this.empDao = empDao;
	}

	/**
	 * find all emp info
	 * @return
	 */
	public List<Emp> findEmps(int pageSize,int pageNow){
		System.out.println("-service findEmps-");
		return empDao.findEmps(pageSize,pageNow);
	}
	/**
	 * add emp info
	 * @param emp
	 */
	public void addEmp(Emp emp){
		empDao.addEmp(emp);
	}

	/**
	 * delete from emp info by empNo
	 */
	public void delEmpByEmpNo(int empNo){
		empDao.delEmpByEmpNo(empNo);
	}
}

[color=red][b]EmpAction [/b][/color]

package com.ssij.action;

import java.util.List;

import com.opensymphony.xwork2.ActionSupport;
import com.ssij.model.Emp;
import com.ssij.service.EmpService;

/**
 * controller emp
 * @author qiyang
 *
 */
public class EmpAction extends ActionSupport {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	private EmpService empService;
	//数据将转换为json格式
	private List<Emp> emps;
	//页码显示数量
	private int pageSize;
	//当前页码
	private int pageNow;

	public int getPageSize() {
		return pageSize;
	}

	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}

	public int getPageNow() {
		return pageNow;
	}

	public void setPageNow(int pageNow) {
		this.pageNow = pageNow;
	}

	public void setEmps(List<Emp> emps) {
		this.emps = emps;
	}

	public List<Emp> getEmps() {
		return emps;
	}

	public void setEmpService(EmpService empService) {
		this.empService = empService;
	}

	/**
	 * add emp info
	 * @return
	 */
	public String addEmp(){

		return "index";
	}
	/**
	 * find all emps
	 * @return
	 */
	public String findEmps(){
		System.out.println(" - action getEmps - ");
		//默认显示4条数据
		if(pageSize==0){pageSize=4;}
		//检查页码
		if(pageNow==0){pageNow=1;}
		//调用业务逻辑获取数据
		emps = empService.findEmps(pageSize,pageNow);
		//测试数据
		for (Emp emp : emps) {
			System.out.println(emp);
		}
		return SUCCESS;
	}
	/**
	 * delete from emp by empNo
	 * @return
	 */
	public String delEmpByEmpNo(){

		return "index";
	}
}

配置文件：
[color=red][b]beans.xml[/b][/color]

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop"
	xmlns:tx="http://www.springframework.org/schema/tx"
	xsi:schemaLocation="
   http://www.springframework.org/schema/beans 
   http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
   http://www.springframework.org/schema/tx 
   http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
   http://www.springframework.org/schema/aop 
   http://www.springframework.org/schema/aop/spring-aop-3.0.xsd">
	<!-- dataSource -->
	<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">
		<property name="driverClassName" value="oracle.jdbc.OracleDriver"/>
		<property name="url" value="jdbc:oracle:thin:@127.0.0.1:1521:orcl" />
		<property name="username" value="scott" />
		<property name="password" value="tiger" />
	</bean>
	<!-- spring and ibatis -->
	<bean id="sf" class="org.springframework.orm.ibatis.SqlMapClientFactoryBean">
		<property name="dataSource" ref="dataSource" />
		<property name="configLocation">
			<value>classpath:sqlMapConfig.xml</value>
		</property>
	</bean>
	<!-- sqlMapClient - >dao -->
	<bean id="empDao" class="com.ssij.dao.EmpDao">
		<property name="sqlMapClient" ref="sf"></property>
	</bean>
	<!-- dao - > service -->
	<bean id="empService" class="com.ssij.service.EmpService">
		<property name="empDao" ref="empDao" />
	</bean>
	<!-- service - > action -->
	<bean id="empAction" class="com.ssij.action.EmpAction">
		 <property name="empService" ref="empService"/>
	</bean>
	<!-- DataSourceTransaction -->
	<bean id="tx" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
		<property name="dataSource" ref="dataSource" />
	</bean>
	<!-- annotaion -->
	<tx:annotation-driven transaction-manager="tx" />
</beans>

[color=red]emp.xml[/color]

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE sqlMap
	PUBLIC "-//ibatis.apache.org//DTD SQL Map 2.0//EN"
	"http://ibatis.apache.org/dtd/sql-map-2.dtd">
<sqlMap>
	<typeAlias alias="emp" type="com.ssij.model.Emp"/>
	<!--  find all emp -->
	<select id="findAllEmps" parameterClass="java.util.HashMap" resultClass="emp">
		<![CDATA[
			select t2.empno,t2.ename,t2.sal,t2.hiredate from (select t1.*,rownum rn from (select * from emp_tb order by empno) t1 where rownum <=#p1#) t2 where rn>#p2#
		]]>
	</select>
	<!-- add emp -->
	<insert id="addEmp" parameterClass="emp">
		insert into emp_tb values (#empNo#,#eName#,#sal#,#hireDate#)
	</insert>
	<!-- del emp -->
	<delete id="delEmpByEmpNo" parameterClass="java.lang.Integer">
		delete from emp_tb where empno=#empNo#
	</delete>
</sqlMap>

[b][color=red]sqlMapConfig.xml[/color][/b]

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE sqlMapConfig
   PUBLIC "-//ibatis.apache.org//DTD SQL Map Config 2.0//EN"
   "http://ibatis.apache.org/dtd/sql-map-config-2.dtd">
<sqlMapConfig>
	<sqlMap resource="emp.xml" />
</sqlMapConfig>

[color=darkred]struts.xml[/color]

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC 
	"-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" 
	"http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
	<!-- json-default 继承自struts-default -->
	<package name="my_package" namespace="/emp" extends="json-default">
		<!-- 此处采用通配符操作 -->
		<action name="*_*" class="{1}" method="{2}">
			<!-- 注意返回类型为json格式 -->
			<result name="success" type="json"></result>
		</action>
	</package>
</struts>    

index.html页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>index.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
	<script type="text/javascript">
	//初始化页码数
	var pageNow = 1;
	//初始化入口
  	$(function(){
  		getData(pageNow);
  	});
  	//根据当前页码，请求处理类获取相应数据
  	var getData = function(pageNow){
  			$.ajax({
  				url:"emp/empAction_findEmps?pageNow="+pageNow,
  				dataType:"json",
  				success:function(data){
  					//alert(data.emps);
  					eachEmp(data.emps);
  				}
  			});
  	}
  	//遍历数据到视图，并设置表格样式
  	var eachEmp = function(empList){
  		if(empList.length==0){
  			//alert("亲，已经到达最后一页！");
  			getData(--pageNow);
  			return false;
  		}
  		//将原始记录清空
  		$("#showInfo").html("");
  		//拼接所有记录到表格的行中
  		var html = "";
  		for(var i = empList.length-1 ;i>=0;i--){
  			html="<tr><td>"+
  			empList[i].empNo+"</td><td>"+
  			empList[i].eName+"</td><td>"+
  			empList[i].sal+"</td><td>"+
  			empList[i].hireDate+
  			"</td></tr>"+html;
  		}
  		//表格头部
  		var tb_head = "<tr><th>empNo</th>" +
  					"<th>eName</th><th>sal</th>" +
  					"<th>hireDate</th></tr>";
  		//将表格添加到div中
  		$("#showInfo").append("<table cellspacing='0'>"+tb_head+html+"</table>");
  		//设置表格底部的元素
  		$("table:first").append(
  			"<tr><td colspan='4'>" +
  			"<a href='#' id='up'>up</a>  " +
  			"<a href='#' id='down'>down</a>" +
  			"</td></tr>");

  		//下一页
  		$("#down").click(function(){
  			getData(++pageNow);
  			return false;
  		});
  		//上一页
  		$("#up").click(function(){
  			if(pageNow==1){pageNow=2;}
  			getData(--pageNow);
  			return false;
  		});

  		/*注意，这种情况下最后才美化界面*/
  		$("#showInfo table").css({
  			"width":"500px"
  		});

  		$("#showInfo table tr td").css({
  			"line-height":"40px",
  			"border-top":"1px solid #ccc",
  			"text-align":"center"
  		});

  		$("#showInfo table tr:eq(0)").css({
  			"background-color":"blue",
  			"color":"white",
  			"line-height":"30px"
  		});

  		$("#showInfo table tr:gt(0):not(:last)").hover(
  			function(){
  				$(this).css({
  					"background-color":"#ccc",
  					"cursor":"pointer"
  				});
  			},function(){
  				$(this).css({
  					"background-color":"white"
  				});
  			}
  		);
  	}
  </script>
  </head>

  <body>
    <center>
    	<h1>HTML</h1>
    	<!-- <button id="mybtnShow">点击无刷新显示数据</button>-->
    	<div id="showInfo"></div>
    </center>
  </body>
</html>

[color=green][size=large][b]
谢谢你能够读完我的代码，最后希望您给点评价！谢谢[/b][/size][/color]