首先介紹一款簡單利落的分頁利器：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外掛程式使用教程
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
