A1ax的分页

今天新学的内容，Ajax分页，初次学习，希望快速进步

1.第一步模型层，

1.1.1.写好Dao层，BaseDao(写好baseDao,万用)

 1 package dao;
 2 
 3 import java.sql.Connection;
 4 import java.sql.SQLException;
 5 import java.sql.Statement;
 6 
 7 import javax.naming.Context;
 8 import javax.naming.InitialContext;
 9 import javax.sql.DataSource;
10 
11 public class BaseDao {
12 
13     public Connection getCon() throws ClassNotFoundException, SQLException{
14         Context c = null;
15         Connection con = null;
16         DataSource source = null;
17         try {
18             c = new InitialContext();
19             source = (DataSource)c.lookup("java:comp/env/jdbc/sc");
20             con = source.getConnection();
21             return con;
22         } catch(Exception e) {
23             e.printStackTrace();
24         } 
25         return null;
26     }
27     
28     public void closeAll(Connection con ,Statement stmt, java.sql.ResultSet rs) throws SQLException {
29         if(rs != null)  rs.close();
30         if(stmt != null) stmt.close();
31         if(con != null && ! con.isClosed()) con.close();
32     }
33 }

1.1.2. 子类Dao层，处理与数据库之间的业务

 1 package dao;
 2 
 3 import java.sql.Connection;
 4 import java.sql.PreparedStatement;
 5 import java.sql.ResultSet;
 6 import java.util.ArrayList;
 7 import java.util.List;
 8 
 9 import entity.Dept;
10 import entity.Emp;
11 
12 public class Dao extends BaseDao{
13     /**
14      * 根据当前页查找数据信息
15      * */
16     public List<Emp> queryIfm(int s, int e) throws Exception {
17         List<Emp> list = new ArrayList<Emp>();
18         Connection con = getCon();
19         PreparedStatement stmt = null;
20         ResultSet rs = null;
21         try{
22             String sql = "SELECT ename,job,sal,dname FROM" +
23                     " (" +
24                     " SELECT ename,job,sal,dname,ROWNUM r FROM emp JOIN  dept ON emp.deptno = dept.deptno WHERE ROWNUM <= ? )" +
25                     " WHERE r > ?";
26             stmt = con.prepareStatement(sql);
27             stmt.setInt(1, e);
28             stmt.setInt(2, s);
29             rs = stmt.executeQuery();
30             while( rs.next() ) {
31                 Emp emp = new Emp();
32                 Dept dept = new Dept();
33                 emp.setName(rs.getString("ename"));
34                 emp.setJob(rs.getString("job"));
35                 dept.setDname(rs.getString("dname"));
36                 emp.setDept(dept);
37                 emp.setSal(rs.getDouble("sal"));
38                 list.add(emp);
39             }            
40         }catch(Exception ex) {
41             ex.printStackTrace();
42         } finally {
43             closeAll(con, stmt, rs);
44         }
45         return list;
46     }
47     /**
48      * 查询信息总条数
49      * */
50     public int queryCount() throws Exception {
51         Connection con = getCon();
52         PreparedStatement stmt = null;
53         ResultSet rs = null;
54         int result = 0;
55         try{            
56             String sql = "SELECT COUNT(1) FROM emp";
57             stmt = con.prepareStatement(sql);
58             rs = stmt.executeQuery();
59             if( rs.next() ) {
60                 result = rs.getInt(1);
61             }
62         } catch( Exception e ) {
63             e.printStackTrace();
64         } finally {
65             closeAll(con, stmt, rs);
66         }
67         return result;
68     }
69     
70     
71 }

1.2 Service层

 1 package service;
 2 
 3 import java.util.ArrayList;
 4 import java.util.List;
 5 
 6 import dao.Dao;
 7 import entity.Emp;
 8 
 9 public class FenYeService {
10 
11     Dao dao = new Dao();
12     /**
13      * 返回查询信息列表
14      * */
15     public List<Emp> returnAllIfm(int page,int pageSize) throws Exception {
16         
17         int s = (page-1) * pageSize;
18         int e = page * pageSize;
19         return dao.queryIfm(s, e);
20     }
21     /**
22      * 根据返回到总数据条数，计算总页数
23      * */
24     public int returnAllPage(int pageSize) throws Exception {
25         int allCount = dao.queryCount();
26         int allPage = allCount % pageSize == 0 ? allCount /pageSize : allCount / pageSize + 1;  
27         return allPage;
28     }
29 }

2.控制层
servlet

 1     public void doPost(HttpServletRequest request, HttpServletResponse response)
 2             throws ServletException, IOException {
 3 
 4         request.setCharacterEncoding("utf-8");
 5         response.setCharacterEncoding("utf-8");
 6         response.setContentType("text/html,charset=utf-8");
 7         
 8         // 获取当前页
 9         String pageStr = request.getParameter("nowPage");
10         int nowPage = pageStr == null ? Counts.nowPage : Integer.parseInt(pageStr);
11         // 获取每页显示数目
12         String pageS = request.getParameter("size");
13         int pageSize = pageS == null ? Counts.pageSize : Integer.parseInt(pageS);
14         
15         
16         FenYeService fenyeService = new FenYeService();
17         try {
18             // 获取信息集合
19             List<Emp> list = fenyeService.returnAllIfm(nowPage, pageSize);
20             // 获取总页数
21             int totalPage = fenyeService.returnAllPage(pageSize);
22             String JsonStr = parseJson(list,totalPage);
23             PrintWriter out = response.getWriter();
24             out.print(JsonStr);
25         } catch (Exception e) {
26             e.printStackTrace();
27         }
28     }
29     
30     private String parseJson(List<Emp> list, int totalPage) {
31         StringBuffer sb = new StringBuffer();
32         sb.append("{");
33         
34         sb.append(" "totalPage":" "+totalPage+" " ");
35         sb.append(",");
36         sb.append(" "list":[ ");
37         for(Emp emp : list) {
38             sb.append(" {"empName" : " "+emp.getName()+" "," +
39                     " "empJob" : " "+emp.getJob()+" "," +
40                             " "empSal" : " "+emp.getSal()+""," +
41                                     " "empDName" : " "+emp.getDept().getDname()+" " }");
42             sb.append(",");
43         }
44         
45         sb.deleteCharAt(sb.length()-1);
46         sb.append("]}");
47         return sb.toString();
48     }

3. 视图层

  1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2 
  3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4 <html>
  5   <head>
  6     
  7     <title>ajax分页</title>
  8     
  9     <meta http-equiv="pragma" content="no-cache">
 10     <meta http-equiv="cache-control" content="no-cache">
 11     <meta http-equiv="expires" content="0">    
 12     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 13     <meta http-equiv="description" content="This is my page">
 14     
 15     <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/Emp.css">
 16     <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.1.js"></script>
 17     <script type="text/javascript">
 18         // 创建一个xmlHttpRequest 对象
 19         var xmlHttpRequest = null;
 20         // 判断浏览器类型
 21         function getXmlHttpRequest() {
 22             // 非IE
 23             if(window.XMLHttpRequest){
 24                 xmlHttpRequest = new XMLHttpRequest();
 25             } else {
 26                 xmlHttpRequest = new ActiveXObject("Microsoft,XMLHTTP");
 27             }
 28         }
 29         // 请求AJAX
 30         function requestAjax(p) {
 31             // 获得浏览器类型
 32             getXmlHttpRequest();
 33             if(xmlHttpRequest) {
 34                 //初始化动作
 35                 xmlHttpRequest.open("post","../fenyeServlet",true);
 36                 xmlHttpRequest.onreadystatechange = CallBack;
 37                 xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 38                 // 正式发送请求
 39                 xmlHttpRequest.send("nowPage=" + p);
 40             }
 41         }
 42         
 43         function CallBack () {
 44             if(xmlHttpRequest.readyState == 4 && 
 45                 xmlHttpRequest.status == 200) {
 46                 var result = xmlHttpRequest.responseText;
 47                 result = eval("("+result+")");
 48                 $("#tb tr:not(:first)").remove();
 49                 var trs = createTr(result);
 50                 $("#tb").append(trs);
 51             }
 52         }
 53         
 54         function createTr(jsonObj){
 55             var jsAr = new Array();
 56             for(var i = 0; i < jsonObj.list.length; i ++) {
 57                 var emp = jsonObj.list[i];
 58                 jsAr.push("<tr>");
 59                 jsAr.push("<td>");
 60                 jsAr.push(i + 1);
 61                 jsAr.push("</td>");
 62                 jsAr.push("<td>");
 63                 jsAr.push(emp.empName);
 64                 jsAr.push("</td>");
 65                 jsAr.push("<td>");
 66                 jsAr.push(emp.empJob);
 67                 jsAr.push("</td>");
 68                 jsAr.push("<td>");
 69                 jsAr.push(emp.empSal);
 70                 jsAr.push("</td>");
 71                 jsAr.push("<td>");
 72                 jsAr.push(emp.empDName);
 73                 jsAr.push("</td>");
 74                 jsAr.push("</tr>");
 75             }
 76             
 77             jsAr.push("<tr>");
 78             jsAr.push("<td colspan='5' align='right'>");
 79             
 80             for(var i = 1; i <= jsonObj.totalPage; i++) {
 81                 jsAr.push("<a class='page' href='javascript:void(0);' onclick='requestAjax(""+i+"");'>"+ i +"</a>&nbsp;&nbsp;");
 82                 jsAr.push("");
 83             }
 84             jsAr.push("</td>");
 85             jsAr.push("</tr>");
 86             //join("")起连接作用
 87             return jsAr.join("");
 88         }
 89         
 90         window.onload = function() {
 91             requestAjax(1);
 92         }
 93         
 94     </script>
 95   </head>
 96   
 97   <body>
 98     <table id="tb">
 99         <tr>
100             <td>序号</td>
101             <td>员工姓名</td>
102             <td>员工工作</td>
103             <td>员工工资</td>
104             <td>员工部门</td>
105         </tr>
106     </table>
107   </body>
108 </html>

以上是核心代码，下面加上entity包
css代码，虽然不好看，但也不至于太难看

 1 table {
 2     background-color: black;
 3     margin: auto;
 4     
 5 }
 6 
 7 td {
 8     background-color: white;
 9     width: 150px;
10     text-align: center;
11 }

1.Emp类

 1 package entity;
 2 
 3 public class Emp {
 4 
 5     private String name;
 6     private String job;
 7     private double sal;
 8     private Dept dept;
 9     
10     public Dept getDept() {
11         return dept;
12     }
13     public void setDept(Dept dept) {
14         this.dept = dept;
15     }
16     public String getName() {
17         return name;
18     }
19     public void setName(String name) {
20         this.name = name;
21     }
22     public String getJob() {
23         return job;
24     }
25     public void setJob(String job) {
26         this.job = job;
27     }
28     public double getSal() {
29         return sal;
30     }
31     public void setSal(double sal) {
32         this.sal = sal;
33     }
34     
35     
36     
37     
38 }

2.Dept类

 1 package entity;
 2 
 3 import java.util.List;
 4 
 5 public class Dept {
 6 
 7     private String deptno;
 8     private String dname;
 9     private String loc;
10     private List<Emp> list;
11     
12     public List<Emp> getList() {
13         return list;
14     }
15     public void setList(List<Emp> list) {
16         this.list = list;
17     }
18     public String getDeptno() {
19         return deptno;
20     }
21     public void setDeptno(String deptno) {
22         this.deptno = deptno;
23     }
24     public String getDname() {
25         return dname;
26     }
27     public void setDname(String dname) {
28         this.dname = dname;
29     }
30     public String getLoc() {
31         return loc;
32     }
33     public void setLoc(String loc) {
34         this.loc = loc;
35     }
36     
37 }

3.count工具包

1 package count;
2 
3 public class Counts {
4 
5     // 默认显示页
6     public static final int nowPage = 1;
7     // 每页显示的条数
8     public static final int pageSize = 5;
9 }

最终运行效果