百度分页效果之纯jsp版

数据库连接工具类

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">&lt;上一页</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">下一页&gt;</a>
        <%
            }
        %>
             </p>
        </div>
        <%}else{%>
        <div class="pageDiv">暂时没有数据!</div>
        <%
        }
        %>

<script type="text/javascript">
</script>
</body>
</html>

项目完整下载路径：http://download.csdn.net/detail/gao36951/8859947

效果图如下

版权声明：本文为博主原创文章，未经博主允许不得转载。