JSP基于Bootstrap分页显示实例解析
首先介绍一款简单利落的分页利器：bootstrap-paginator，可以参考：Bootstrap Paginator分页插件使用方法详解 这篇文章进行学习。
效果截图：
GitHub官方下载地址：https://github.com/lyonlai/bootstrap-paginator
下面就来详细介绍一下基于这款分页利器的JSP分页显示实现过程（注：相较于原网页我隐去了很多不必要的内容，本例只专注于分页显示的实现）
一、为什么需要分页显示？
这篇博文说得很透彻：分页技术原理与实现之分页的意义及方法（一）
二、JSP页面部分，这里直接在JSP页面中用JDBC连接SqlServer2005数据库查询数据（实际实现里不建议把复杂的业务逻辑封装在JSP页面中，JSP页面应当只是负责显示；对客户端的响应、业务逻辑调用、结果转发都应该由Servlet来完成）
代码如下：
<%@ page import="PaginationExample.*" %>
<%@ page import="java.util.*"%>
<%@ page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%!
private static final int pageSize = 20; //设定每页显示的记录条数（当前为每页显示20条记录）
%>
<%
request.setCharacterEncoding("UTF-8"); //设定客户端提交给servlet的内容按UTF-8编码
response.setCharacterEncoding("UTF-8"); //设定servlet传回给客户端的内容按UTF-8编码
response.setContentType("text/html;charset=UTF-8"); //告知浏览器用UTF-8格式解析内容
String pageNoStr = request.getParameter("pageNoStr"); //接收客户端传递的要显示页数
int pageNo = 1; //要显示的页数
int totalPages = 1; //总页数
//检查、设置pageNo
if (pageNoStr != null && !pageNoStr.equals("")) {
try {
pageNo = Integer.parseInt(pageNoStr);
if (pageNo < 1) {
//pageNo小于1时默认显示第一页
pageNo = 1;
}
}
catch (NumberFormatException e) {
//获取到的pageNo（当前页面数）不合法时，默认显示第一页
pageNo = 1;
}
}
else {
//其他未获取到pageNo的情况都默认显示第一页
pageNo = 1;
}
/* ========================================连接数据库（获取总页数与当前页内要显示的观测记录）====================================== */
/* 获取数据库中将记录按指定条数（pageSize）分页后的总页数 */
Connection totalConn = null;
Statement totalStmt = null;
ResultSet totalRs = null;
try {
totalConn = DBUtil.getConnection();
//生成sql语句
String sqlGetTotalPages = "select count(*) from alldata";
//获取总记录条数
totalStmt = totalConn.createStatement();
totalRs = totalStmt.executeQuery(sqlGetTotalPages);
totalRs.next();
int countResult = totalRs.getInt(1);
//取得总页数
totalPages = countResult % pageSize == 0 ? countResult / pageSize : (int)(countResult / pageSize) + 1;
} catch (SQLException e) {
System.out.println("历史记录查询出错，操作未完成!");
e.printStackTrace();
} finally {
DBUtil.close(totalRs);
DBUtil.close(totalStmt);
DBUtil.close(totalConn);
}
/* 如果页数大于总页数，则默认显示最后一页 */
if (pageNo > totalPages) {
pageNo = totalPages;
}
/* 获取数据库中当前页内要显示的观测记录，使用一个List来盛装记录 */
List<Record> records = new ArrayList<Record>();
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
int startIndex = (pageNo - 1) * pageSize + 1;
int endIndex = pageNo * pageSize;
try {
conn = DBUtil.getConnection();
String sql = "select * from (select row_number() over(order by data_taizhan_num, data_date asc) as 'num', * from alldata) as temp where num between " + startIndex + " and " + endIndex;
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
while (rs.next()) {
//取出每条记录的数据，并将其封装成Record对象
Record r = new Record();
r.setTaizhan_num(rs.getString(2));
r.setDate(rs.getTimestamp(3));
r.setTem(rs.getString(4));
r.setHum(rs.getString(5));
r.setPa(rs.getString(6));
r.setRain(rs.getString(7));
r.setWin_dir(rs.getString(8));
r.setWin_sp(rs.getString(9));
records.add(r); //将封装好的Record对象放入列表容器中
}
} catch (SQLException e) {
System.out.println("查询出错，操作未完成!");
e.printStackTrace();
} finally {
DBUtil.close(rs);
DBUtil.close(pstmt);
DBUtil.close(conn);
}
System.out.println(totalPages);
System.out.println(pageNo);
/* ========================================数据库连接结束====================================== */
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <%-- 在IE运行最新的渲染模式 --%>
<meta name="viewport" content="width=device-width, initial-scale=1"> <%-- 初始化移动浏览显示 --%>
<meta name="Author" content="Dreamer-1.">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/recordSearchResult.css">
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-paginator.min.js"></script>
<title>- 搜索记录 -</title>
</head>
<body>
<div class="container">
<div class="wrapper">
<!-- 使用表单展示数据记录 -->
<form class="form-area">
<table class="table table-striped table-hover" >
<%
if (records == null || records.size() == 0) {
out.println("<tr><td><h4><strong>没有符合要求的记录呢，不如换个搜索条件试试吧~</strong></h4></td></tr>");
}
else {
%>
<tr>
<td><h4><strong>观测台站</strong></h4></td>
<%
Record r = records.get(0);
if (r.getTem() != null) {
out.println("<td><h4><strong>温度(℃)</strong></h4></td>");
}
if (r.getHum() != null) {
out.println("<td><h4><strong>湿度(%)</strong></h4></td>");
}
if (r.getPa() != null) {
out.println("<td><h4><strong>压强(hPa)</strong></h4></td>");
}
if (r.getRain() != null) {
out.println("<td><h4><strong>雨量(mm)</strong></h4></td>");
}
if (r.getWin_dir() != null) {
out.println("<td><h4><strong>风向(°)</strong></h4></td>");
}
if (r.getWin_sp() != null) {
out.println("<td><h4><strong>风速(m/s)</strong></h4></td>");
}
%>
<td><h4><strong>观测时间</strong></h4></td>
</tr>
<%
}
%>
<%
if (records != null && records.size() != 0) {
for (Record r : records) {
%>
<tr>
<td><%= r.getTaizhan_num() %></td>
<%
if (r.getTem() != null) {
out.println("<td>" + r.getTem() + "</td>");
}
if (r.getHum() != null) {
out.println("<td>"+ r.getHum() +"</td>");
}
if (r.getPa() != null) {
out.println("<td>" + r.getPa() + "</td>");
}
if (r.getRain() != null) {
out.println("<td>" + r.getRain() + "</td>");
}
if (r.getWin_dir() != null) {
out.println("<td>" + r.getWin_dir() + "</td>");
}
if (r.getWin_sp() != null) {
out.println("<td>" + r.getWin_sp() + "</td>");
}
%>
<td><%= r.getDate() %></td>
</tr>
<%
}
%>
</table>
<!-- 分页显示div -->
<div align="center">
<ul class="pagination" id="paginator"></ul>
</div>
</form>
<%
}
%>
</div>
</div>
<script type='text/javascript'>
var options = {
bootstrapMajorVersion: 3, //bootstrap版本
size: 'normal',
itemTexts: function (type, page, current) {
switch (type) {
case "first":
return "首页";
case "prev":
return "<i class='fa fa-caret-left'></i> 上一页";
case "next":
return "下一页 <i class='fa fa-caret-right'></i>";
case "last":
return "末页";
case "page":
return page;
}
},
tooltipTitles: function (type, page, current) {
switch (type) {
case "first":
return "首页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "末页";
case "page":
return "第" + page + "页";
}
},
pageUrl: function(type, page, current){
return "showInfoSearchResult.jsp?pageNoStr="+page; //跳转到选定页面
},
numberOfPages: 6, //显示“第几页”的选项数目
currentPage: <%= pageNo %>, //当前页数
totalPages: <%= totalPages %> //总页数
}
$('#paginator').bootstrapPaginator(options);
</script>
</body>
</html>
三、关于本例中用到的Record、DBUtil类：
Record类是一个用于封装数据的，对外仅提供get/set方法的普通Java类，其属性与数据库表中包含的字段一一对应，代码如下：
package PaginationExample;
import java.sql.*;
/**
* 封装气象数据信息
* @author zhong
*
*/
public class Record {
private String taizhan_num; //台站名
private String tem; //温度
private String hum; //湿度
private String pa; //压强
private String rain; //雨量
private String win_dir; //风向
private String win_sp; //风速
private Timestamp date; //观测日期（原始格式）
/**
* 获取产生该观测记录的台站名称；
* @return 台站名称
*/
public String getTaizhan_num() {
return taizhan_num;
}
/**
* 设置产生该观测记录的台站名称；
* @param taizhan_num 待设置台站名称
*/
public void setTaizhan_num(String taizhan_num) {
this.taizhan_num = taizhan_num;
}
/**
* 获取温度；
* @return 温度值
*/
public String getTem() {
return tem;
}
/**
* 设置温度；
* @param tem 待设置温度值
*/
public void setTem(String tem) {
this.tem = tem;
}
/**
* 获取湿度；
* @return 湿度值
*/
public String getHum() {
return hum;
}
/**
* 设置湿度；
* @param hum 待设置湿度值
*/
public void setHum(String hum) {
this.hum = hum;
}
/**
* 获取压强；
* @return 压强值
*/
public String getPa() {
return pa;
}
/**
* 设置压强；
* @param pa 待设置压强值
*/
public void setPa(String pa) {
this.pa = pa;
}
/**
* 获取雨量；
* @return 雨量值
*/
public String getRain() {
return rain;
}
/**
* 设置雨量；
* @param rain 待设置雨量值
*/
public void setRain(String rain) {
this.rain = rain;
}
/**
* 获取风向；
* @return 风向值
*/
public String getWin_dir() {
return win_dir;
}
/**
* 设置风向；
* @param win_dir 待设置风向值
*/
public void setWin_dir(String win_dir) {
this.win_dir = win_dir;
}
/**
* 获取风速；
* @return 风速值
*/
public String getWin_sp() {
return win_sp;
}
/**
* 设置风向；
* @param win_sp 待设置风向值
*/
public void setWin_sp(String win_sp) {
this.win_sp = win_sp;
}
/**
* 获取观测日期；
* @return 观测日期
*/
public Timestamp getDate() {
return date;
}
/**
* 设置观测日期；
* @param date 观测日期值
*/
public void setDate(Timestamp date) {
this.date = date;
}
}
对应的alldata表部分数据截图：
DBUtil类是一个数据库工具类，统一对外提供与数据库相关的Connection、Statement等，代码如下：
package PaginationExample;
import java.sql.*;
import org.apache.tomcat.jdbc.pool.DataSource;
import org.apache.tomcat.jdbc.pool.PoolProperties;
/**
* 数据库工具类（采用了tomcat jdbc pool）
* @author zhong
*
*/
public class DBUtil {
private static DataSource ds;
static {
//配置tomcat jdbc pool (连接池)
PoolProperties p = new PoolProperties();
p.setUrl("jdbc:sqlserver://localhost:1433; DatabaseName=weather"); //设置连接的url
p.setDriverClassName("com.microsoft.sqlserver.jdbc.SQLServerDriver"); //载入数据库驱动
p.setUsername("sa"); //用于远程连接的用户名
p.setPassword("2003NianDeDiYiChangXue"); //密码
p.setJmxEnabled(true);
p.setTestWhileIdle(false);
p.setTestOnBorrow(true);
p.setValidationQuery("SELECT 1");
p.setTestOnReturn(false);
p.setValidationInterval(30000);
p.setTimeBetweenEvictionRunsMillis(30000);
p.setMaxActive(100);
p.setInitialSize(10);
p.setMaxWait(10000);
p.setRemoveAbandonedTimeout(60);
p.setMinEvictableIdleTimeMillis(30000);
p.setMinIdle(10);
p.setLogAbandoned(true);
p.setRemoveAbandoned(true);
p.setJdbcInterceptors(
"org.apache.tomcat.jdbc.pool.interceptor.ConnectionState;"+
"org.apache.tomcat.jdbc.pool.interceptor.StatementFinalizer");
ds = new DataSource();
ds.setPoolProperties(p);
}
private DBUtil() {}
/**
* 获取一个数据库连接（Connection）；
* @return Database Connection
*/
public static Connection getConnection() {
Connection conn = null;
try {
conn = ds.getConnection();
} catch (SQLException e) {
e.printStackTrace();
}
return conn;
}
/**
* 关闭传入的Connection；
* @param conn 待关闭的Connection
*/
public static void close(Connection conn) {
try {
if (conn != null) {
conn.close();
conn = null;
}
} catch (SQLException e) {
e.printStackTrace();
}
}
/**
* 关闭传入的Statement；
* @param stmt 待关闭的Statement
*/
public static void close(Statement stmt) {
try {
if (stmt != null) {
stmt.close();
stmt = null;
}
} catch (SQLException e) {
e.printStackTrace();
}
}
/**
* 关闭传入的ResultSet；
* @param rs 待关闭的ResultSet
*/
public static void close(ResultSet rs) {
try {
if (rs != null) {
rs.close();
rs = null;
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
四、补充说明：
①：SQLServer实现分页时需借助ROW_NUMBER()函数，以生成一个单独记录了行号的列，方便后面分页时取出对应行号区间段的记录。例：
看到了吧，最前面多了一列存储了行号的字段名为num的列；
（如果表内主键id是自动递增的数字的话，也可以直接用id来分段取出记录，但前提是id必须连续且自动递增）
关于更多ROW_NUMBER()函数实现分页的信息请参考：SQL Server使用row_number分页的实现方法
②：MySQL分页实现起来简单很多，直接使用limit关键字即可。例：
select * from table1 order by id asc limit 3, 2 意即将表table1中的数据按id值排序（升序）后，从第三行开始，取后面的两行记录（即第四、五行记录）
③：关于bootstrap-paginator的具体使用方法可以参考官方的文档（位于解压后的document文件夹内），官方文档写得很棒，简单易懂。
在使用时要注意对于bootstrap V3版本来说，要使用<ul>标签来显示bootstrap-paginator，并在配置项里注明所用bootstrap的版本（参考我jsp示例页面的写法）。
（bootstrap V2版本直接使用示例文档中的<div>标签即可）
④：分页常用公式：设要显示的页数为 n ，每页显示 m 条数据，则（数据库中）待取数据的开始位置（即jsp示例中的startIndex）为： (n-1)*m+1，终止位置（endIndex）为：n*m
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
BootStrap在jsp中的使用
下载bootstrap的js,css文件: 在jsp中的应用: 第一步: 新建一个web项目 将bootstrap下载下来的文件放入WEB-INF下面的,lib目录下,新建一个bootstrap文件: 第二步: 新建一个index.jsp文件,引入所使用的css.js和bootstrap的: 注意这里的要缓存<!DOCTYPE html> <html lang="zh-CN"> 第三步: 在body中载入需要的组件: 运行在tomcat服务器上: 效果如图: 第
-
JSP基于Bootstrap分页显示实例解析
首先介绍一款简单利落的分页利器:bootstrap-paginator,可以参考:Bootstrap Paginator分页插件使用方法详解 这篇文章进行学习. 效果截图: GitHub官方下载地址:https://github.com/lyonlai/bootstrap-paginator 下面就来详细介绍一下基于这款分页利器的JSP分页显示实现过程(注:相较于原网页我隐去了很多不必要的内容,本例只专注于分页显示的实现) 一.为什么需要分页显示? 这篇博文说得很透彻:分页技术原理与实现之分
-
基于Bootstrap分页的实例讲解(必看篇)
前面的话 分页导航几乎在每个网站都可见,好的分页能给用户带来好的用户体验.本文将详细介绍Bootstrap分页 概述 在Bootstrap框架中提供了两种分页导航: ☑ 带页码的分页导航 ☑ 带翻页的分页导航 页码分页 带页码的分页导航,可能是最常见的一种分页导航,特别是在列表页内容超多的时候,会给用户提供分页的导航方式 [默认分页] 平时很多人喜欢用div>a和div>span结构来制作带页码的分页导航.不过,在Bootstrap框架中使用的是ul>li>a这样的结构,在ul标签
-
Java Web 简单的分页显示实例代码
本文通过两个方法:(1)计算总的页数. (2)查询指定页数据,实现简单的分页效果. 思路:首先得在 DAO 对象中提供分页查询的方法,在控制层调用该方法查到指定页的数据,在表示层通过 EL 表达式和 JSTL 将该页数据显示出来. 先给大家展示下效果图: 题外话:该分页显示是用 "表示层-控制层-DAO层-数据库"的设计思想实现的,有什么需要改进的地方大家提出来,共同学习进步.废话不多说了,开始进入主题,详细步骤如下所示: 1.DAO层-数据库 JDBCUtils 类用于打开和关闭数据
-
Java分页查询--分页显示(实例讲解)
当数据库中数据条数过多时,一个页面就不能显示,这是要设置分页查询,首先要使用的是数据库sql语句的limit条件实现分组查询 sql语句大概形式为: select * from table limit 开始索引,显示条数 用该语句就会实现分块查询,并且每页显示固定条数. 首先要实现后台分页,我们需要知道它有多少页,每页有多少行,这就需要知道一共多少行,调用sql语句时还需要知道每一页的开始索引,开始索引是根据当前页数算出来的,所以还需要知道当前页数,查询后会返回一个列表存储当前页数据.将这些属性
-
JSP实现添加功能和分页显示实例分析
本文实例讲述了JSP实现添加功能和分页显示的方法.分享给大家供大家参考.具体如下: 学习目标: ① 进一步掌握MVC设计模式: ② 掌握添加功能的实现: ③ 掌握分页显示功能的实现. 主要内容: ① 通过用户信息添加功能进一步介绍MVC模式: ② 通过用户信息的分页显示介绍分页显示功能的原理和实现. 1.如何采用MVC模式完成用户添加? 首先考虑与人如何交互:应该有一个输入用户信息的界面,包含用户名和口令,另外需要一反馈的界面. 然后考虑功能如何实现:需要在User类中添加一个方法,完成用户信息
-
JSP常用七大动作指令实例解析
1.jsp:forward: 转发,必须配合jsp:param动作指令使用 <jsp:forward page="/b.jsp"> <jsp:param name="username" value="admin"/> </jsp:forward> 2.jsp:param 用于传递参数,必须与其他支持参数的标签一起使用 到达跳转页面可以通过 request.getParameter("参数名"
-
Thinkphp3.2.3分页使用实例解析
首先要搞清楚的就是ThinkPHP3.2.3的分页类已经被移到了Think\Page.class.php,这是跟以前的版本有些不一样的,使用起来还是跟以前版本差不多,但是默认的效果不敢恭维,所以最好是自己加些样式. 我加了一些样式(不怎么好看),大家可以自行的再去改进分页样式,效果图: 在这里我有先把page的设置做成了一个函数getpage,将这个方法放到Application\Common\Common\function.php(注意function不是类)中方便其他地方调用,代码如下: <
-
mysql oracle和sqlserver分页查询实例解析
最近简单的对oracle,mysql,sqlserver2005的数据分页查询作了研究,把各自的查询的语句贴出来供大家学习..... (一).mysql的分页查询 mysql的分页查询是最简单的,借助关键字limit即可实现查询,查询语句通式: selecto.*from(sql)o limit firstIndex,pageSize 如下面的截图,每页显示的记录数为20: 查询(1-20)这20条记录 查询(21-40)这20条记录 mysql的分页查询就这么简单...... (二).sqls
-
SQL查询语句行转列横向显示实例解析
本文分享了两个有关SQL查询语句行转列横向显示的示例,供大家参考,具体内容如下 示例1: 在SQL查询语句行转列横向显示中access中没有CASE,要用IIF代替 select iif(sex= '1 ', '男 ', '女 ') from tablename select country, sum(case when type='A' then money end) as A, sum(case when type='B' then money end) as B, sum(case
-
基于Bootstrap和jQuery构建前端分页工具实例代码
前言 为啥名字叫[前端分页工具]?因为我实在想不到什么好名字,如果想要更加贴切的理解这个工具,应该从业务来看 业务是这样的,有一个数据从后台传到前台,因为数据量不大,因此传过来之后直接显示即可,但是=.=所谓的数据量不大,最多也达到成百上千条,不可能全部显示出来,那么就需要分页 常规的分页是利用Ajax,通过传页偏移量到后台,后台查询数据库再返回数据,可以实现无刷新分页,拿到的数据也是最新的 前端分页 优点:一次传输数据,避免用户反复请求服务器,减少网络带宽.服务器调度压力.数据库查询.缓存查询