百度分页效果之纯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"><上一页</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
效果图例如以下
百度分页效果之纯jsp版的更多相关文章
- jsp页面数据分页模仿百度分页效果
<%@page import="web09.shop.DBUtil"%> <%@page import="java.sql.ResultSet" ...
- JSP版(utf8编码)的Ueditor百度文章编辑器配置以及使用说明
二话不说,先上图: 我配置好的效果大致是这些功能:基本的文字编辑功能.图片上传功能.附件上传功能.百度/谷歌地图搜索截图.视/音频发布功能.这个插件是现今我用过觉得最舒服的编辑器,功能齐全强大,稍微修 ...
- 纯原生javascript实现分页效果
随着近几年前端行业的迅猛发展,各种层出不穷的新框架,新方法让我们有点眼花缭乱. 最近刚好比较清闲,所以没事准备撸撸前端的根基javascript,纯属练练手,写个分页,顺便跟大家分享一下 functi ...
- 基于vue2.0实现仿百度前端分页效果(二)
前言 上篇文章中,已经使用vue实现前端分页效果,这篇文章我们单独将分页抽离出来实现一个分页组件 先看实现效果图 代码实现 按照惯例,我们在冻手实现的时候还是先想一想vue实现组件的思路 1.需要提前 ...
- 基于vue2.0实现仿百度前端分页效果(一)
前言 最近在接手一个后台管理项目的时候,由于之前是使用jquery+bootstrap做的,后端使用php yii框架,前后端耦合在一起,所以接手过来之后通过vue进行改造,但依然继续使用的boots ...
- 使用Mybatis插件 PageHelper 模拟百度分页(Day_20)
生活中,要学会沉淀生命,沉淀心情,沉淀自己 模拟百度分页最终实现效果如图: 本篇博客运行环境 JDK8 + IntelliJ IDEA 2018.3 + Tomcat 8.5.31 准备好了我们就开始 ...
- 纯jsp用户登录系统
用纯jsp技术实现用户登录系统,需要用到三个.jsp文件.在文本目录下新建三个.jsp文件,分别命名为login.jsp,logincl.jsp和wel.jsp. 1.login.jsp文件用来放界面 ...
- 关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手
关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手 本人菜鸟一枚,最近公司有需求要用到富文本编辑器,我选择的是百度的ueditor富文本编辑器,闲话不多说,进入正 ...
- jsp版ueditor图片在线管理返回绝对路径
引用:http://zhengyunfei.iteye.com/blog/2149979 如果你有富文本编辑器的功能需要开发,我推荐你用百度的ueditor.本文将与你分享jsp版ueditor开发中 ...
随机推荐
- UpdateParameterUtils
/** * */ package com.neptune.business.api.job; import java.text.SimpleDateFormat; import java.uti ...
- spring batch(二):核心部分(1):配置Spring batch
spring batch(二):核心部分(1):配置Spring batch 博客分类: Spring 经验 java chapter 3.Batch configuration 1.spring ...
- HDU 1160 FatMouse's Speed DP题解
本题就先排序老鼠的重量,然后查找老鼠的速度的最长递增子序列,只是由于须要按原来的标号输出,故此须要使用struct把三个信息打包起来. 查找最长递增子序列使用动态规划法.主要的一维动态规划法了. 记录 ...
- Java-SpringCloud:目录
ylbtech-Java-SpringCloud:目录 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:htt ...
- POJ 3233 矩阵快速幂&二分
题意: 给你一个n*n的矩阵 让你求S: 思路: 只知道矩阵快速幂 然后nlogn递推是会TLE的. 所以呢 要把那个n换成log 那这个怎么搞呢 二分! 当k为偶数时: 当k为奇数时: 就按照这么搞 ...
- Spark on YARN运行模式(图文详解)
不多说,直接上干货! 请移步 Spark on YARN简介与运行wordcount(master.slave1和slave2)(博主推荐) Spark on YARN模式的安装(spark-1.6. ...
- net 线程挂起
2013.10.18 通讯组件开发 情景: 主线程添加队列,子线程负责队列中消息发送.当队列中数据为空时,停止发送挂起子线程. 当主线程添加队列时,重新开启子线程进行消息发送. 方案一 但是不采用传 ...
- Centos7 minimal 系列之NAT联网(一)
一.安装 参考:http://m.blog.csdn.net/qq_24879495/article/details/77838512 二.解决不能联网问题 打开网络共享中心,设置虚拟网卡 编辑虚拟机 ...
- jquery分页点击后页面置顶
前台: <a href="#" ><span id='top'></span></a> js中: 放在分页事件后,数据加载完成后 j ...
- 微信小程序面试题
小程序与原生App哪个好? 答: 小程序除了拥有公众号的低开发成本.低获客成本低以及无需下载等优势,在服务请求延时与用户使用体验是都得到了较大幅度 的提升,使得其能够承载跟复杂的服务功能以及使用户获 ...