JSP分頁顯示實例（基於Bootstrap）

首先介紹一款簡單利落的分頁顯示利器：bootstrap-paginator

效果截圖：

GitHub官方下載地址：https://github.com/lyonlai/bootstrap-paginator

備用下載地址：http://files.cnblogs.com/files/Dreamer-1/bootstrap-paginator-master.rar

下麵就來詳細介紹一下基於這款分頁利器的JSP分頁顯示實現過程（註：相較於原網頁我隱去了很多不必要的內容，本例只專註於分頁顯示的實現）

一：

為什麼需要分頁顯示？

這篇博文的博主說得很透徹：http://blog.csdn.net/xiaoyousifang/article/details/5659667

二：

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>