JSP基于Bootstrap分頁顯示實例解析
更新時間：2016年06月12日 08:36:25 作者：Dreamer-1
這篇文章主要為大家詳細(xì)介紹了JSP基于Bootstrap分頁顯示實例,具有一定的參考價值，感興趣的小伙伴們可以參考一下
首先介紹一款簡單利落的分頁利器：bootstrap-paginator，可以參考：Bootstrap Paginator分頁插件使用方法詳解 這篇文章進行學(xué)習(xí)。
效果截圖：
GitHub官方下載地址：https://github.com/lyonlai/bootstrap-paginator
下面就來詳細(xì)介紹一下基于這款分頁利器的JSP分頁顯示實現(xiàn)過程（注：相較于原網(wǎng)頁我隱去了很多不必要的內(nèi)容，本例只專注于分頁顯示的實現(xiàn)）
一、為什么需要分頁顯示？
這篇博文說得很透徹：分頁技術(shù)原理與實現(xiàn)之分頁的意義及方法（一）
二、JSP頁面部分，這里直接在JSP頁面中用JDBC連接SqlServer2005數(shù)據(jù)庫查詢數(shù)據(jù)（實際實現(xiàn)里不建議把復(fù)雜的業(yè)務(wù)邏輯封裝在JSP頁面中，JSP頁面應(yīng)當(dāng)只是負(fù)責(zé)顯示；對客戶端的響應(yīng)、業(yè)務(wù)邏輯調(diào)用、結(jié)果轉(zhuǎn)發(fā)都應(yīng)該由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; //設(shè)定每頁顯示的記錄條數(shù)（當(dāng)前為每頁顯示20條記錄）
%>
<%
request.setCharacterEncoding("UTF-8"); //設(shè)定客戶端提交給servlet的內(nèi)容按UTF-8編碼
response.setCharacterEncoding("UTF-8"); //設(shè)定servlet傳回給客戶端的內(nèi)容按UTF-8編碼
response.setContentType("text/html;charset=UTF-8"); //告知瀏覽器用UTF-8格式解析內(nèi)容
String pageNoStr = request.getParameter("pageNoStr"); //接收客戶端傳遞的要顯示頁數(shù)
int pageNo = 1; //要顯示的頁數(shù)
int totalPages = 1; //總頁數(shù)
//檢查、設(shè)置pageNo
if (pageNoStr != null && !pageNoStr.equals("")) {
try {
pageNo = Integer.parseInt(pageNoStr);
if (pageNo < 1) {
//pageNo小于1時默認(rèn)顯示第一頁
pageNo = 1;
}
}
catch (NumberFormatException e) {
//獲取到的pageNo（當(dāng)前頁面數(shù)）不合法時，默認(rèn)顯示第一頁
pageNo = 1;
}
}
else {
//其他未獲取到pageNo的情況都默認(rèn)顯示第一頁
pageNo = 1;
}
/* ========================================連接數(shù)據(jù)庫（獲取總頁數(shù)與當(dāng)前頁內(nèi)要顯示的觀測記錄）====================================== */
/* 獲取數(shù)據(jù)庫中將記錄按指定條數(shù)（pageSize）分頁后的總頁數(shù) */
Connection totalConn = null;
Statement totalStmt = null;
ResultSet totalRs = null;
try {
totalConn = DBUtil.getConnection();
//生成sql語句
String sqlGetTotalPages = "select count(*) from alldata";
//獲取總記錄條數(shù)
totalStmt = totalConn.createStatement();
totalRs = totalStmt.executeQuery(sqlGetTotalPages);
totalRs.next();
int countResult = totalRs.getInt(1);
//取得總頁數(shù)
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);
}
/* 如果頁數(shù)大于總頁數(shù)，則默認(rèn)顯示最后一頁 */
if (pageNo > totalPages) {
pageNo = totalPages;
}
/* 獲取數(shù)據(jù)庫中當(dāng)前頁內(nèi)要顯示的觀測記錄，使用一個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()) {
//取出每條記錄的數(shù)據(jù)，并將其封裝成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);
/* ========================================數(shù)據(jù)庫連接結(jié)束====================================== */
%>
<!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">
<!-- 使用表單展示數(shù)據(jù)記錄 -->
<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>風(fēng)向(°)</strong></h4></td>");
}
if (r.getWin_sp() != null) {
out.println("<td><h4><strong>風(fēng)速(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; //跳轉(zhuǎn)到選定頁面
},
numberOfPages: 6, //顯示“第幾頁”的選項數(shù)目
currentPage: <%= pageNo %>, //當(dāng)前頁數(shù)
totalPages: <%= totalPages %> //總頁數(shù)
}
$('#paginator').bootstrapPaginator(options);
</script>
</body>
</html>
三、關(guān)于本例中用到的Record、DBUtil類：
Record類是一個用于封裝數(shù)據(jù)的，對外僅提供get/set方法的普通Java類，其屬性與數(shù)據(jù)庫表中包含的字段一一對應(yīng)，代碼如下：
package PaginationExample;
import java.sql.*;
/**
* 封裝氣象數(shù)據(jù)信息
* @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; //風(fēng)向
private String win_sp; //風(fēng)速
private Timestamp date; //觀測日期（原始格式）
/**
* 獲取產(chǎn)生該觀測記錄的臺站名稱；
* @return 臺站名稱
*/
public String getTaizhan_num() {
return taizhan_num;
}
/**
* 設(shè)置產(chǎn)生該觀測記錄的臺站名稱；
* @param taizhan_num 待設(shè)置臺站名稱
*/
public void setTaizhan_num(String taizhan_num) {
this.taizhan_num = taizhan_num;
}
/**
* 獲取溫度；
* @return 溫度值
*/
public String getTem() {
return tem;
}
/**
* 設(shè)置溫度；
* @param tem 待設(shè)置溫度值
*/
public void setTem(String tem) {
this.tem = tem;
}
/**
* 獲取濕度；
* @return 濕度值
*/
public String getHum() {
return hum;
}
/**
* 設(shè)置濕度；
* @param hum 待設(shè)置濕度值
*/
public void setHum(String hum) {
this.hum = hum;
}
/**
* 獲取壓強；
* @return 壓強值
*/
public String getPa() {
return pa;
}
/**
* 設(shè)置壓強；
* @param pa 待設(shè)置壓強值
*/
public void setPa(String pa) {
this.pa = pa;
}
/**
* 獲取雨量；
* @return 雨量值
*/
public String getRain() {
return rain;
}
/**
* 設(shè)置雨量；
* @param rain 待設(shè)置雨量值
*/
public void setRain(String rain) {
this.rain = rain;
}
/**
* 獲取風(fēng)向；
* @return 風(fēng)向值
*/
public String getWin_dir() {
return win_dir;
}
/**
* 設(shè)置風(fēng)向；
* @param win_dir 待設(shè)置風(fēng)向值
*/
public void setWin_dir(String win_dir) {
this.win_dir = win_dir;
}
/**
* 獲取風(fēng)速；
* @return 風(fēng)速值
*/
public String getWin_sp() {
return win_sp;
}
/**
* 設(shè)置風(fēng)向；
* @param win_sp 待設(shè)置風(fēng)向值
*/
public void setWin_sp(String win_sp) {
this.win_sp = win_sp;
}
/**
* 獲取觀測日期；
* @return 觀測日期
*/
public Timestamp getDate() {
return date;
}
/**
* 設(shè)置觀測日期；
* @param date 觀測日期值
*/
public void setDate(Timestamp date) {
this.date = date;
}
}
對應(yīng)的alldata表部分?jǐn)?shù)據(jù)截圖：
DBUtil類是一個數(shù)據(jù)庫工具類，統(tǒng)一對外提供與數(shù)據(jù)庫相關(guān)的Connection、Statement等，代碼如下：
package PaginationExample;
import java.sql.*;
import org.apache.tomcat.jdbc.pool.DataSource;
import org.apache.tomcat.jdbc.pool.PoolProperties;
/**
* 數(shù)據(jù)庫工具類（采用了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"); //設(shè)置連接的url
p.setDriverClassName("com.microsoft.sqlserver.jdbc.SQLServerDriver"); //載入數(shù)據(jù)庫驅(qū)動
p.setUsername("sa"); //用于遠(yuǎn)程連接的用戶名
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() {}
/**
* 獲取一個數(shù)據(jù)庫連接（Connection）；
* @return Database Connection
*/
public static Connection getConnection() {
Connection conn = null;
try {
conn = ds.getConnection();
} catch (SQLException e) {
e.printStackTrace();
}
return conn;
}
/**
* 關(guān)閉傳入的Connection；
* @param conn 待關(guān)閉的Connection
*/
public static void close(Connection conn) {
try {
if (conn != null) {
conn.close();
conn = null;
}
} catch (SQLException e) {
e.printStackTrace();
}
}
/**
* 關(guān)閉傳入的Statement；
* @param stmt 待關(guān)閉的Statement
*/
public static void close(Statement stmt) {
try {
if (stmt != null) {
stmt.close();
stmt = null;
}
} catch (SQLException e) {
e.printStackTrace();
}
}
/**
* 關(guān)閉傳入的ResultSet；
* @param rs 待關(guān)閉的ResultSet
*/
public static void close(ResultSet rs) {
try {
if (rs != null) {
rs.close();
rs = null;
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
四、補充說明：
①：SQLServer實現(xiàn)分頁時需借助ROW_NUMBER()函數(shù)，以生成一個單獨記錄了行號的列，方便后面分頁時取出對應(yīng)行號區(qū)間段的記錄。例：
看到了吧，最前面多了一列存儲了行號的字段名為num的列；
（如果表內(nèi)主鍵id是自動遞增的數(shù)字的話，也可以直接用id來分段取出記錄，但前提是id必須連續(xù)且自動遞增）
關(guān)于更多ROW_NUMBER()函數(shù)實現(xiàn)分頁的信息請參考：SQL Server使用row_number分頁的實現(xiàn)方法
②：MySQL分頁實現(xiàn)起來簡單很多，直接使用limit關(guān)鍵字即可。例：
select * from table1 order by id asc limit 3, 2 意即將表table1中的數(shù)據(jù)按id值排序（升序）后，從第三行開始，取后面的兩行記錄（即第四、五行記錄）
③：關(guān)于bootstrap-paginator的具體使用方法可以參考官方的文檔（位于解壓后的document文件夾內(nèi)），官方文檔寫得很棒，簡單易懂。
在使用時要注意對于bootstrap V3版本來說，要使用<ul>標(biāo)簽來顯示bootstrap-paginator，并在配置項里注明所用bootstrap的版本（參考我jsp示例頁面的寫法）。
（bootstrap V2版本直接使用示例文檔中的<div>標(biāo)簽即可）
④：分頁常用公式：設(shè)要顯示的頁數(shù)為 n ，每頁顯示 m 條數(shù)據(jù)，則（數(shù)據(jù)庫中）待取數(shù)據(jù)的開始位置（即jsp示例中的startIndex）為： (n-1)*m+1，終止位置（endIndex）為：n*m
如果大家還想深入學(xué)習(xí)，可以點擊這里進行學(xué)習(xí)，再為大家附3個精彩的專題：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了如何使用js實現(xiàn)瀏覽歷史記錄,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了JS小游戲之仙劍翻牌源碼,是一款比較經(jīng)典的卡牌類游戲,對于javascript游戲設(shè)計有不錯的借鑒價值,需要的朋友可以參考下2014-09-09
本文給大家分享一段實例代碼介紹JS判斷時間段的方法，需要的朋友參考下吧2017-06-06
JavaScript獲取并更改input標(biāo)簽name屬性的方法
這篇文章主要介紹了JavaScript獲取并更改input標(biāo)簽name屬性的方法,涉及javascript針對表單元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2015-07-07
Javascript無參數(shù)和有參數(shù)類繼承問題解決方法
這篇文章主要介紹了Javascript無參數(shù)和有參數(shù)類繼承問題解決方法,本文講解了無參數(shù)類繼承的問題和有參類繼承的問題,并給出了解決方案,需要的朋友可以參考下2015-03-03
選擇與取消選擇不錯的應(yīng)用 js...2006-12-12
這篇文章主要介紹了js隨機抽獎代碼效果，大家參考使用2013-12-12
在Javascript操作JSON對象，增加 刪除 修改的簡單實現(xiàn)
下面小編就為大家?guī)硪黄贘avascript操作JSON對象，增加 刪除 修改的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
js實現(xiàn)textarea限制輸入字?jǐn)?shù)
本文主要介紹了js實現(xiàn)textarea限制輸入字?jǐn)?shù)的原理與方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了JS合并兩個數(shù)組的3種方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10