百度分页效果之纯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开发中 ...
随机推荐
- 怎样改动 VC6.0 4.0 2010 打印预览界面上的文字
前言:尽管早已下决心不再碰微软的东西,但手头的项目还得须要维护. 遇到问题还能解决. 问题由来: 之前的软件开发是基于中文环境开发的,建立项目的时候,选择了中文,为了方便客户使用.我们使用了静态编译的 ...
- Android APP漏洞挖掘
0x00 1.组件公开安全漏洞 參考Android 组件安全. 2.Content Provider文件文件夹遍历漏洞 參考Content Provider文件文件夹遍历漏洞浅析. 3.Android ...
- 0x07 贪心
被虐爆了...贪心这种玄学东西还可以证吗??除了范围缩放算是可以想想比较经典(倍增第一题?)... poj3614:这道题想了很久,并没有想到是把minSPF按大到小排序,一直的思想是小的就小到大排序 ...
- hdoj--1018--Big Number(简单数学)
Big Number Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...
- Anaconda安装及PyCharm环境配置
1. Anaconda下载 Anaconda 官方下载链接: https://www.continuum.io/downloads 根据自己的系统选择下载32位还是64位. 2. 进入下载目录 如果没 ...
- 如何用php实现qq登陆网站
PHP网站入QQ互联,使用QQ号码登录网站. 平台接口系列文章 PHP网站入QQ互联,使用QQ号码登录网站 PHP网站接入人人网,授权登陆 php facebook api网站接入facebook 1 ...
- NSURLSession简介
NSURLSession是iOS7中新的网络接口,它与咱们熟悉的NSURLConnection是并列的.在程序在前台时,NSURLSession与NSURLConnection可以互为替代工作.注意, ...
- 通过配置host,自定义域名让本地访问
最近服务器这块一直由我来维护,我们开发的项目很多域名根本没有解析,而是仅仅配置了host,就可以本地访问服务器了.感觉很有意思,于是乎,打算试一试.结果弄了许久,最后第二天才解决了.把这个艰辛的旅程记 ...
- LeetCode224. Basic Calculator (用栈计算表达式)
解题思路 用两个栈分别存字符和数字. 顺序读入字符,处理方式分为字符和数字两种. 处理字符分为')'和非')'两种. 处理数字需要读取字符栈栈顶,分为'+'.'-'和非'+'.'-'. 代码 clas ...
- WebView简单用法
1.空布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:andr ...