首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JSP基于Bootstrap分页显示实例解析

Posted in Javascript onJune 12, 2016

首先介绍一款简单利落的分页利器：bootstrap-paginator，可以参考：Bootstrap Paginator分页插件使用方法详解 这篇文章进行学习。
效果截图：

JSP基于Bootstrap分页显示实例解析 

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表部分数据截图：

JSP基于Bootstrap分页显示实例解析

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()函数，以生成一个单独记录了行号的列，方便后面分页时取出对应行号区间段的记录。例：

JSP基于Bootstrap分页显示实例解析

看到了吧，最前面多了一列存储了行号的字段名为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个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

JSP基于Bootstrap分页显示实例解析

- Author -

Dreamer-1

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
JavaScript手机振动API
Jun 11 #Javascript
JavaScript地理位置信息API
Jun 11 #Javascript
jQuery自定义数值抽奖活动代码
Jun 11 #Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 #Javascript
javaScript知识点总结(必看篇)
Jun 10 #Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 #Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 #Javascript
频率(1) TOSHIBA(1) RP-F11(1) 手调机(1) 灵敏度(1) 高放电路(1) 频偏(1) 数调机(1) 鉴频器(1) 东芝(1)
You might like
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
JavaScript DOM 编程艺术（第2版）读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
js 作用域和变量详解
2017/02/16 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
layui实现三级联动效果
2019/07/26 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
Python3正则匹配re.split，re.finditer及re.findall函数用法详解
2018/06/11 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
python实现淘宝购物系统
2019/10/25 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
便携式太阳能系统的创新者：GOAL ZERO
2018/02/04 全球购物
师范生实习个人的自我评价
2013/09/28 职场文书
有创意的广告词
2014/03/18 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
Python办公自动化PPT批量转换操作
2021/09/15 Python
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技