百度分页效果之纯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开发中 ...
随机推荐
- 51nod 1413:权势二进制
1413 权势二进制 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题 收藏 关注 一个十进制整数被叫做权势二进制,当他的十进制 ...
- Hit 2255 Not Fibonacci
今天下午刚起来眼睛就比較涨,,并且还有点恶心,唉.结果一直不在状态.并且这个题太坑了.. .. 点击此处即可传送 Hit 2255 Maybe ACMers of HIT are always fon ...
- Java-MyBatis:MyBatis XML 文件
ylbtech-Java-MyBatis:MyBatis XML 文件 1.返回顶部 1. Mapper XML 文件 MyBatis 的真正强大在于它的映射语句,也是它的魔力所在.由于它的异常强大, ...
- 利用JDBC或者事物或者调用存储过程实现往MySQL插入百万级数据
转自:http://www.cnblogs.com/fnz0/p/5713102.html 想往某个表中插入几百万条数据做下测试, 原先的想法,直接写个循环10W次随便插入点数据试试吧,好吧,我真的很 ...
- leetcode 系列文章目录
leetcode 系列文章目录 0. 两数之和1. 两数相加 2. 无重复字符的最长子串 3. 寻找两个有序数组的中位数 4. 最长回文子串 5. Z 字形变换 6. 整数反转 7. 字符串转换整数 ...
- 11.QT窗口布局切割
int main(int argc, char *argv[]) { QApplication a(argc, argv); //MainWindow w; //w.show(); //左右分割 7 ...
- c# CacheHelper缓存帮助类
一.开篇 主要功能:改善程序性能.服务器的响应速度,尤其是当数据的处理过程变得复杂以及访问量变大时,变得比较明显.有些数据并非时刻在发生变化,如果我们可以将一些变化不频繁的数据的最终计算结果(包括页面 ...
- 洛谷P1962 斐波那契数列(矩阵快速幂)
题目背景 大家都知道,斐波那契数列是满足如下性质的一个数列: • f(1) = 1 • f(2) = 1 • f(n) = f(n-1) + f(n-2) (n ≥ 2 且 n 为整数) 题目描述 请 ...
- <Android Framework 之路>Android5.1 Camera Framework(三)
上一次讲解了一下startPreview过程,主要是为了画出一条大致的从上到下的线条,今天我们看一下Camera在Framework的sendCommand和dataCallback,这部分属于衔接过 ...
- C++逐行读取文本文件的正确做法
作者:朱金灿 来源:http://blog.csdn.net/clever101 之前写了一个分析huson日志的控制台程序,其中涉及到C++逐行读取文本文件的做法,代码是这样写的: ifstream ...