本文主要包含jsp使用bootstrap,bootstrap jsp,jsp中使用bootstrap,bootstrap分页实例,jsp分页实例等相关知识,Dreamer-1 希望在学习及工作中可以帮助到您
首先介绍一款简单利落的分页利器：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);
/* ========================================数据库连接结束====================================== */
%>
</div>
<!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("&