jQuery EasyUI 简单应用

User.java(封装数据)

package user.domain;

import java.io.Serializable;
import java.util.Date;

public class User implements Serializable{
	private static final long serialVersionUID = 1L;
    
	private Integer id;
	private String name;
	private String pass;
	public User(){
		super();
	}
	public User(Integer id, String name, String pass) {
		super();
		this.id = id;
		this.name = name;
		this.pass = pass;
	}
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPass() {
		return pass;
	}
	public void setPass(String pass) {
		this.pass = pass;
	}
	@Override
	public String toString() {
		return "User [id=" + id + ", name=" + name + ", pass=" + pass + "]";
	}
	
}

UserDao.java（接口）

package user.dao;

import java.util.List;

import user.domain.User;

public interface UserDao{
	List<User> findNowPageInfo(int starIndex, int endIndex, String sortName,
			String sortOrder);
}

工具类

Pagination.java

package util;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;

public class Pagination<T> {

	private Integer pageSize;// 每页显示的记录数
	private Integer nowPage; // 当前页
	private Integer total;// 总记录数
	private Integer countPage;// 总页数

	// 数据库中开始记录数和结束记录数
	private Integer startIndex;// 开始记录数
	private Integer endIndex;// 结束记录数



	// 封装的每页显示的记录
	private List<T> rows;

	public Pagination(Integer nowPage, Integer pageSize, String table) {
		// 当前页
		this.nowPage = nowPage;
		this.pageSize = pageSize;

		// 判断当前页是否小于1
		if (this.nowPage < 1) {
			this.nowPage = 1;
		}
		// 获取总记录数
		this.total = this.selectCountSize(table);
		// 计算总页数
		this.countPage = this.total % this.pageSize == 0 ? this.total
				/ this.pageSize : this.total / this.pageSize + 1;
		// 判断当前页是否大于等于总页数
		if (this.nowPage >= this.countPage) {
			this.nowPage = this.countPage;
		}

		// 计算开始的记录数和结束的记录数
		// select * from table limit ?,?
		this.startIndex = (this.nowPage - 1) * this.pageSize;
		this.endIndex = this.pageSize;



	}

	

	public Integer getTotal() {
		return total;
	}

	

	public Integer getStartIndex() {
		return startIndex;
	}

	public Integer getEndIndex() {
		return endIndex;
	}



	public List<T> getRows() {
		return rows;
	}

	public void setRows(List<T> rows) {
		this.rows = rows;
	}

	/**
	 * 获取总记录数
	 * 
	 * @param table
	 * @return
	 */
	public Integer selectCountSize(String table) {
		int countSize = 0;
		String sql = "select count(*) as c from " + table;
		Connection conn = DBConn.getConn();
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		try {
			pstmt = conn.prepareStatement(sql);
			rs = pstmt.executeQuery();
			if (rs.next()) {
				countSize = rs.getInt("c");
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			DBConn.release(rs, pstmt);
		}
		return countSize;
	}


}

db.properties

url=jdbc\:mysql\://localhost\:3306/csdn?useUnicode\=true&characterEncoding\=UTF-8
user=root
pass=113
driverClassName=com.mysql.jdbc.Driver

DBConn.java

package util;

import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.Properties;

public class DBConn {
 private static Connection conn;
 private DBConn(){
	 
 }
 public static Connection getConn(){
	 if(conn==null){
		 //创建集合对象
		 Properties properties=new Properties();
		 try {
			 //装载
			properties.load(DBConn.class.getClassLoader().getResourceAsStream("db.properties"));
		    //加载驱动程序
			Class.forName(properties.getProperty("driverClassName"));
			//获取连接对象
			conn=DriverManager.getConnection(properties.getProperty("url"),properties.getProperty("user"),properties.getProperty("pass"));
		    conn.setAutoCommit(false);
		 } catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	 }
	 return conn;
 }
 public static void update(String sql,Object params[],PreparedStatement pstmt) throws Exception{
	 pstmt=getConn().prepareStatement(sql);
	 for (int i = 0; i < params.length; i++) {
		pstmt.setObject(i+1, params[i]);
	}
	 pstmt.executeUpdate();
	 conn.commit();
	 conn.rollback();

	 release(null,pstmt);
 }
public  static void release(ResultSet rs, PreparedStatement pstmt) {
     if (rs!=null) {
		try {
			rs.close();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	if (pstmt!=null) {
		try {
			pstmt.close();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
}
}

UserDaoImp.java（实现接口的类）

package user.imp;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import user.dao.UserDao;
import user.domain.User;
import util.DBConn;

public class UserDaoImp implements UserDao {
	private Connection conn;
	private PreparedStatement pstmt;
	private ResultSet rs;

	@Override
	public List<User> findNowPageInfo(int starIndex, int endIndex,String sortName,String sortOrder) {
		List<User> entities=new ArrayList<User>();
		conn=DBConn.getConn();
		
		if(sortName==null){
			sortName="id";
			sortOrder="desc";
		}
		
		String sql="select id,name,pass from user order by "+sortName+" "+sortOrder+" limit ?,?";
		try {
			pstmt=conn.prepareStatement(sql);
			int index=1;
			pstmt.setInt(index++,starIndex);
			pstmt.setInt(index++,endIndex);
			
			rs=pstmt.executeQuery();
			while(rs.next()){
				User user=new User(rs.getInt("id"),rs.getString("name"),rs.getString("pass"));
			    entities.add(user);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}finally{
			DBConn.release(rs, pstmt);
		}
		return entities;
	}

}

UserServlet.java

package user.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

import user.dao.UserDao;
import user.domain.User;
import user.imp.UserDaoImp;
import util.Pagination;

public class UserServlet extends HttpServlet {
	private UserDao userDao = new UserDaoImp();

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String oper = request.getParameter("oper");
		
		if ("list".equals(oper)) {
			pagination(request, response);
		} 

	}

	private void pagination(HttpServletRequest request,
			HttpServletResponse response) throws IOException {
		
		String npage = request.getParameter("page");
		String npagesize = request.getParameter("rows");
		String sortName = request.getParameter("sort");
		String sortOrder = request.getParameter("order");

		Integer nowPage = 0;
		if (npage != null) {
			nowPage = Integer.valueOf(npage);
		}
		Integer pageSize = 3;
		if (npagesize != null) {
			pageSize = Integer.valueOf(npagesize);
		}

		Pagination<User> pagination = new Pagination<User>(nowPage, pageSize,
				"user");
		pagination.setRows(userDao.findNowPageInfo(pagination.getStartIndex(),
				pagination.getEndIndex(),sortName,sortOrder));

		//System.out.println(pagination.toString());
		JSONObject jsonObject = JSONObject.fromObject(pagination);
		response.setContentType("application/json");
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		out.write(jsonObject.toString());
		out.close();
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		this.doGet(request, response);
	}

}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
	<display-name></display-name>

	<servlet>

		<servlet-name>UserServlet</servlet-name>

		<servlet-class>user.servlet.UserServlet</servlet-class>

	</servlet>

	<servlet-mapping>

		<servlet-name>UserServlet</servlet-name>

		<url-pattern>/userList.do</url-pattern>

	</servlet-mapping>
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>
</web-app>

user_init.js

	$(document).ready(function() {
		$("#dg").datagrid({
			rownumbers : true,
			url :"./userList.do?oper=list" ,
			sortName:"id",
			sortOrder:"desc",
		
			columns : [ [{
				checkbox:true
			},
			 {
				field : "id",
				title : "xuhao",
				width : 50,
				sortable:true
			}, {
				field : "name",
				title : "name",
				width : 50,
				editors:{
					type:"input"
				}
			}, {
				field : "pass",
				title : "pass",
				width : 50
			} ] ],
			singleSelect : true,
			pagination : true,
			pageList : [ 3, 5, 8 ],
			pageSize : 3
		});
		$("#dg").datagrid("getPager").pagination({
			pageList : [ 3, 5, 8 ],
			pageSize : 3,
			beforPageText : "当前是",
			afterPageText : "页，共{pages}页",
			displayMsg : "从{from}到{to}记录，共{total}记录"
		});

	});

user.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/themes/icon.css">

<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/user_init.js"></script>

</head>

<body>
	<div>
		<div style="height: 20%;">搜索操作：</div>
		<div style="height: 80%;">
			<table id="dg" data-options="fit:true"></table>
		</div>
</body>
</html>