<!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 content="width=device-width, initial-scale=1"> <%-- 初始化移动浏览显示 --%> <meta content="Dreamer-1."> <link href="https://www.jb51.net/css/bootstrap.css"> <link href="https://www.jb51.net/css/recordSearchResult.css"> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.12.3.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/bootstrap-paginator.min.js"></script> <title>- 搜索记录 -</title> </head> <body> <div> <div> <!-- 使用表单展示数据记录 --> <form> <table > <% 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> <ul></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></i> 上一页"; case "next": return "下一页 <i></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等，代码如下：