首页
所有分类
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的消息提示插件 DivAlert之旅（二）
Apr 01 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
May 05 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
jQuery实现高级检索功能
May 28 jQuery
微信小程序实现按字母排列选择城市功能
Nov 25 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
jQuery实现评论模块
Aug 19 jQuery
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
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) Storage(1) 自定义组件(1) Jmerte(1) HashSet集合(1) persistedstate(1) Set接口(1) KVM(1) click(1) Vue(10)
You might like
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
C# Assembly类访问程序集信息
2009/06/13 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
php单例模式实现方法分析
2015/03/14 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
javascript 内存回收机制理解
2011/01/17 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
range 标准化之获取
2011/08/28 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
python3访问sina首页中文的处理方法
2014/02/24 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
基于python socketserver框架全面解析
2017/09/21 Python
python中模块的__all__属性详解
2017/10/26 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
体验完美剃须：The Art of Shaving
2018/08/06 全球购物
Java面试中常遇到的问题，也是需要注意的几点
2013/08/30 面试题
手工社团活动方案
2014/02/17 职场文书
安全标语大全
2014/06/10 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
先进单位事迹材料
2014/12/25 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang