百度分页效果之纯jsp版
2015-07-01 23:11
246 查看
数据库连接工具类
package com.gao.page.utils; import java.sql.Connection; import java.sql.DriverManager; public class DatabaseConnection { /** *一个静态方法,返回一个数据库的连接。 *这样达到了对数据库连接统一控制的目的。 */ public static Connection getConnection() { Connection con=null; String classForName="com.mysql.jdbc.Driver"; String servAndDB="jdbc:mysql://localhost/gaodb"; String user="root"; String pwd="123"; try { Class.forName(classForName); con = DriverManager.getConnection(servAndDB,user,pwd); } catch(Exception e) { e.printStackTrace(); } return con; } }
Person实体类
package com.gao.page; /** * @作者 Relieved * @创建日期 2015年6月14日 * @描述 (person类) * @版本 V 1.0 */ public class Person { private Integer id; private String name; private Integer gender; private String phone; private Integer age; private String address; /** * @return the id */ public Integer getId() { return id; } /** * @param id the id to set */ public void setId(Integer id) { this.id = id; } /** * @return the name */ public String getName() { return name; } /** * @param name the name to set */ public void setName(String name) { this.name = name; } /** * @return the gender */ public Integer getGender() { return gender; } /** * @param gender the gender to set */ public void setGender(Integer gender) { this.gender = gender; } /** * @return the age */ public Integer getAge() { return age; } /** * @param age the age to set */ public void setAge(Integer age) { this.age = age; } /** * @return the phone */ public String getPhone() { return phone; } /** * @param phone the phone to set */ public void setPhone(String phone) { this.phone = phone; } /** * @return the address */ public String getAddress() { return address; } /** * @param address the address to set */ public void setAddress(String address) { this.address = address; } }
数据库连接操作类
package com.gao.page; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.Statement; import java.util.ArrayList; import java.util.List; import com.gao.page.utils.DatabaseConnection; public class Personbean { private static Connection con; //构造方法,获得数据库的连接。 static { con=DatabaseConnection.getConnection(); } /** * 带分页的查询 * @param pageSize * @param pageNum * @return * @throws Exception */ public static List<Person> getPersonInf(int pageNum,int pageSize)throws Exception { PreparedStatement pstmt=con.prepareStatement("select * from person limit ?,? "); pstmt.setInt(1,(pageNum-1)*pageSize); pstmt.setInt(2,pageSize); ResultSet rst=pstmt.executeQuery(); List<Person> ret=new ArrayList<Person>(); while(rst.next()) { Person temp=new Person(); temp.setId(rst.getInt(1)); temp.setName(rst.getString(2)); temp.setGender(rst.getInt(3)); temp.setPhone(rst.getString(4)); temp.setAge(rst.getInt(5)); temp.setAddress(rst.getString(6)); ret.add(temp); } return ret; } /** * 获取记录总条数 * @return * @throws Exception */ public static int getPersonCount()throws Exception { Statement pstmt=con.createStatement(); String sql = "select * from person"; ResultSet rst=pstmt.executeQuery(sql); rst.last();//移动到最后一行 return rst.getRow(); } }
jsp页面代码
<%@page import="java.util.*,com.gao.page.Person"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% request.setCharacterEncoding("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" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>分页查询</title> <style type="text/css"> /*css*/ /*表格修饰*/ .tablelist{ border:1px solid #0058a3; font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif; border-collapse:collapse; border-spacing:1pt; background-color:#eaf5ff; font-size:13px } .tablelist tr.backrow{ background-color:#c7e5ff; } .tablelist td.cen{ text-align:center; } #page { font: 14px simsun; white-space: nowrap; } p, form, ol, ul, li, dl, dt, dd, h3 { margin: 0; padding: 0; list-style: none; } #page a, #page strong { display: inline-block; vertical-align: text-bottom; height: 54px; text-align: center; line-height: 22px; text-decoration: none; overflow: hidden; margin-right: 5px; background: white; } #page a { cursor: pointer; } #page .fk { width: 24px; height: 30px; background: url( "./image/bg-1.0.4.png" ) -35px -309px no-repeat; cursor: pointer; } #page .pc { width: 22px; height: 22px; border: 1px solid #E7ECF0; cursor: pointer; } #page span { display: block; } #page .n { height: 22px; padding: 0 6px; border: 1px solid #E7ECF0; } #page .fk_cur { background-position: 2px -312px; } #page strong .pc { border: 0; width: 24px; height: 24px; line-height: 24px; } #page .fkd { background-position: -35px -303px; } #page .n:hover, #page a:hover .pc { background: #EBEBEB; } .pageDiv{ margin-left: auto; margin-right: auto; text-align:center; } </style> <script src="./js/jquery-1.9.1.js"></script> </head> <body> <jsp:useBean id="Connection" class="com.gao.page.utils.DatabaseConnection"></jsp:useBean> <jsp:useBean id="person" class="com.gao.page.Personbean"></jsp:useBean> <% final int showPages = 5;//上一页和下一页之间显示的页码数 int pageNum = request.getParameter("pageNum")==null?1:Integer.parseInt(request.getParameter("pageNum"));//默认为首页 int pageSize = request.getParameter("pageSize")==null?6:Integer.parseInt(request.getParameter("pageSize"));//默认为6条 List<Person> list = person.getPersonInf(pageNum,pageSize); int totalRecords = person.getPersonCount();//总数据条数 int totalPages = totalRecords%pageSize==0?(totalRecords/pageSize):(totalRecords/pageSize+1);//总页码数 int pageStart = Math.max(1, pageNum - showPages/2);//显示的起始页码 int pageEnd = Math.min(totalPages, pageStart + showPages - 1);//显示的尾页 pageStart = Math.max(1, pageEnd - showPages + 1); %> <div class="pageDiv"><h3>员工信息</h3></div> <br> <table class="tablelist" border="1" align="center" width = "80%" > <tr> <th class="cen">Id</td> <th class="cen">姓名</td> <th class="cen">性别</td> <th class="cen">手机号</td> <th class="cen">年龄</td> <th class="cen">地址</td> </tr> <% if(list.size()>0){ for(int i=0;i<list.size();i++) { if(i%2==0){ %> <tr class="backrow"> <td class="cen"><%=list.get(i).getId()%></td> <td class="cen"><%=list.get(i).getName()%></td> <td class="cen"><%=list.get(i).getGender()%></td> <td class="cen"><%=list.get(i).getPhone()%></td> <td class="cen"><%=list.get(i).getAge()%></td> <td class="cen"><%=list.get(i).getAddress()%></td> </tr> <%}else{%> <tr> <td class="cen"><%=list.get(i).getId()%></td> <td class="cen"><%=list.get(i).getName()%></td> <td class="cen"><%=list.get(i).getGender()%></td> <td class="cen"><%=list.get(i).getPhone()%></td> <td class="cen"><%=list.get(i).getAge()%></td> <td class="cen"><%=list.get(i).getAddress()%></td> </tr> <% } }%> </table> <div class="pageDiv"> <p id="page"> <% if(pageNum>1){ %> <a target="_self" href="<%=basePath%>index.jsp?pageNum=<%=(pageNum-1)%>" class="n"><上一页</a> <% } while(pageStart<=pageEnd){ if(pageStart==pageNum){ %> <a target="_self" href="<%=basePath%>index.jsp?pageNum=<%=pageStart%>"> <span class="fk fk_cur"></span><span class="pc"><%=pageStart %></span> </a> <% }else if(pageStart%2!=0){ %> <a target="_self" href="<%=basePath%>index.jsp?pageNum=<%=pageStart%>"> <span class="fk"></span><span class="pc"><%=pageStart %></span> </a> <% }else{ %> <a target="_self" href="<%=basePath%>index.jsp?pageNum=<%=pageStart%>"> <span class="fk fkd"></span><span class="pc"><%=pageStart %></span> </a> <% } pageStart++; } if(pageNum<totalPages){%> <a target="_self" href="<%=basePath%>index.jsp?pageNum=<%=(pageNum+1)%>" class="n">下一页></a> <% } %> </p> </div> <%}else{%> <div class="pageDiv">暂时没有数据!</div> <% } %> <script type="text/javascript"> </script> </body> </html>
项目完整下载路径:http://download.csdn.net/detail/gao36951/8859947
效果图如下
相关文章推荐
- 也谈C#之Json,从Json字符串到类代码
- JavaScript中(动态函数,匿名函数)函数
- JavaScript表达式
- JavaScript权威指南_117_第15章_脚本化文档_15.2-选取文档元素-通过CSS选择器选取元素
- JavaScript中凼数(定义格式+细节)演示
- js正则表达式
- JavaScript中的数组
- [Books] 《JavaScript权威指南》 -- #1~5
- JSON 之FastJson解析
- JSON 之GSON 解析
- 《webgl入门指南》学习笔记三之three.js创建多重纹理
- js常用的地址栏参数获取
- json-lib反序列化抽象属性及对象
- JavaScript基本类型转换,== != === !==总结
- 深入浅出Ext JS 学习计划
- ExtJs中分页时带查询条件
- jsp+servlet小练习
- js 闭包理解
- js 多选 反选
- bzoj1017 [JSOI2008]魔兽地图DotR