欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JSP基于Bootstrap分頁(yè)顯示實(shí)例解析

 更新時(shí)間:2016年06月12日 08:36:25   作者:Dreamer-1  
這篇文章主要為大家詳細(xì)介紹了JSP基于Bootstrap分頁(yè)顯示實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

首先介紹一款簡(jiǎn)單利落的分頁(yè)利器:bootstrap-paginator,可以參考:Bootstrap Paginator分頁(yè)插件使用方法詳解 這篇文章進(jìn)行學(xué)習(xí)。
效果截圖:

 

GitHub官方下載地址:https://github.com/lyonlai/bootstrap-paginator
 下面就來詳細(xì)介紹一下基于這款分頁(yè)利器的JSP分頁(yè)顯示實(shí)現(xiàn)過程(注:相較于原網(wǎng)頁(yè)我隱去了很多不必要的內(nèi)容,本例只專注于分頁(yè)顯示的實(shí)現(xiàn))

一、為什么需要分頁(yè)顯示?
 這篇博文說得很透徹:分頁(yè)技術(shù)原理與實(shí)現(xiàn)之分頁(yè)的意義及方法(一)

二、JSP頁(yè)面部分,這里直接在JSP頁(yè)面中用JDBC連接SqlServer2005數(shù)據(jù)庫(kù)查詢數(shù)據(jù)(實(shí)際實(shí)現(xiàn)里不建議把復(fù)雜的業(yè)務(wù)邏輯封裝在JSP頁(yè)面中,JSP頁(yè)面應(yīng)當(dāng)只是負(fù)責(zé)顯示;對(duì)客戶端的響應(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è)定每頁(yè)顯示的記錄條數(shù)(當(dāng)前為每頁(yè)顯示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"); //接收客戶端傳遞的要顯示頁(yè)數(shù)
 int pageNo = 1; //要顯示的頁(yè)數(shù)
 int totalPages = 1; //總頁(yè)數(shù)

 
 //檢查、設(shè)置pageNo
 if (pageNoStr != null && !pageNoStr.equals("")) {
 try {
 pageNo = Integer.parseInt(pageNoStr);
 
 if (pageNo < 1) {
 //pageNo小于1時(shí)默認(rèn)顯示第一頁(yè)
 pageNo = 1;
 }
 }
 catch (NumberFormatException e) {
 //獲取到的pageNo(當(dāng)前頁(yè)面數(shù))不合法時(shí),默認(rèn)顯示第一頁(yè)
 pageNo = 1;
 }
 }
 else {
 //其他未獲取到pageNo的情況都默認(rèn)顯示第一頁(yè)
 pageNo = 1;
 }
 
/* ========================================連接數(shù)據(jù)庫(kù)(獲取總頁(yè)數(shù)與當(dāng)前頁(yè)內(nèi)要顯示的觀測(cè)記錄)====================================== */ 
 
 /* 獲取數(shù)據(jù)庫(kù)中將記錄按指定條數(shù)(pageSize)分頁(yè)后的總頁(yè)數(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);
 
 //取得總頁(yè)數(shù)
 totalPages = countResult % pageSize == 0 ? countResult / pageSize : (int)(countResult / pageSize) + 1; 
 
 } catch (SQLException e) {
 System.out.println("歷史記錄查詢出錯(cuò),操作未完成!");
 e.printStackTrace();
 } finally {
 DBUtil.close(totalRs);
 DBUtil.close(totalStmt);
 DBUtil.close(totalConn);
 }
 

 /* 如果頁(yè)數(shù)大于總頁(yè)數(shù),則默認(rèn)顯示最后一頁(yè) */
 if (pageNo > totalPages) {
 pageNo = totalPages;
 }
 
 
 /* 獲取數(shù)據(jù)庫(kù)中當(dāng)前頁(yè)內(nèi)要顯示的觀測(cè)記錄,使用一個(gè)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對(duì)象
 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對(duì)象放入列表容器中
 }
 
 } catch (SQLException e) {
 System.out.println("查詢出錯(cuò),操作未完成!");
 e.printStackTrace();
 } finally {
 DBUtil.close(rs);
 DBUtil.close(pstmt);
 DBUtil.close(conn);
 }
System.out.println(totalPages);
System.out.println(pageNo);
/* ========================================數(shù)據(jù)庫(kù)連接結(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運(yùn)行最新的渲染模式 --%>
 <meta name="viewport" content="width=device-width, initial-scale=1"> <%-- 初始化移動(dòng)瀏覽顯示 --%>
 <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>沒有符合要求的記錄呢,不如換個(gè)搜索條件試試吧~</strong></h4></td></tr>"); 
 }
 else {
 %> 
 <tr>
 <td><h4><strong>觀測(cè)臺(tái)站</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>壓強(qiáng)(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>觀測(cè)時(shí)間</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> 
 
 <!-- 分頁(yè)顯示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 "首頁(yè)";
 case "prev":
 return "<i class='fa fa-caret-left'></i> 上一頁(yè)";
 case "next":
 return "下一頁(yè) <i class='fa fa-caret-right'></i>";
 case "last":
 return "末頁(yè)";
 case "page":
 return page;
 }
 },
 tooltipTitles: function (type, page, current) {
 switch (type) {
 case "first":
 return "首頁(yè)";
 case "prev":
 return "上一頁(yè)";
 case "next":
 return "下一頁(yè)";
 case "last":
 return "末頁(yè)";
 case "page":
 return "第" + page + "頁(yè)";
 }
 },
 pageUrl: function(type, page, current){
 return "showInfoSearchResult.jsp?pageNoStr="+page; //跳轉(zhuǎn)到選定頁(yè)面
 },
 numberOfPages: 6, //顯示“第幾頁(yè)”的選項(xiàng)數(shù)目
 currentPage: <%= pageNo %>, //當(dāng)前頁(yè)數(shù)
 totalPages: <%= totalPages %> //總頁(yè)數(shù)
 }
 
 $('#paginator').bootstrapPaginator(options);
 </script>
 
 </body>
</html>

三、關(guān)于本例中用到的Record、DBUtil類:
 Record類是一個(gè)用于封裝數(shù)據(jù)的,對(duì)外僅提供get/set方法的普通Java類,其屬性與數(shù)據(jù)庫(kù)表中包含的字段一一對(duì)應(yīng),代碼如下: 

package PaginationExample;

import java.sql.*;

/**
 * 封裝氣象數(shù)據(jù)信息
 * @author zhong
 *
 */
public class Record {
 
 private String taizhan_num; //臺(tái)站名
 private String tem; //溫度
 private String hum; //濕度
 private String pa; //壓強(qiáng)
 private String rain; //雨量
 private String win_dir; //風(fēng)向
 private String win_sp; //風(fēng)速
 private Timestamp date; //觀測(cè)日期(原始格式)
 
 /**
 * 獲取產(chǎn)生該觀測(cè)記錄的臺(tái)站名稱;
 * @return 臺(tái)站名稱
 */
 public String getTaizhan_num() {
 return taizhan_num;
 }

 /**
 * 設(shè)置產(chǎn)生該觀測(cè)記錄的臺(tái)站名稱;
 * @param taizhan_num 待設(shè)置臺(tái)站名稱
 */
 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;
 }

 /**
 * 獲取壓強(qiáng);
 * @return 壓強(qiáng)值
 */
 public String getPa() {
 return pa;
 }

 /**
 * 設(shè)置壓強(qiáng);
 * @param pa 待設(shè)置壓強(qiáng)值
 */
 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;
 }

 /**
 * 獲取觀測(cè)日期;
 * @return 觀測(cè)日期
 */
 public Timestamp getDate() {
 return date;
 }

 /**
 * 設(shè)置觀測(cè)日期; 
 * @param date 觀測(cè)日期值
 */
 public void setDate(Timestamp date) {
 this.date = date;
 }

 
}

對(duì)應(yīng)的alldata表部分?jǐn)?shù)據(jù)截圖:

DBUtil類是一個(gè)數(shù)據(jù)庫(kù)工具類,統(tǒng)一對(duì)外提供與數(shù)據(jù)庫(kù)相關(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ù)庫(kù)工具類(采用了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ù)庫(kù)驅(qū)動(dòng)
 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() {}
 
 /**
 * 獲取一個(gè)數(shù)據(jù)庫(kù)連接(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();
 }
 }
 
}

四、補(bǔ)充說明:
 ①:SQLServer實(shí)現(xiàn)分頁(yè)時(shí)需借助ROW_NUMBER()函數(shù),以生成一個(gè)單獨(dú)記錄了行號(hào)的列,方便后面分頁(yè)時(shí)取出對(duì)應(yīng)行號(hào)區(qū)間段的記錄。例:

看到了吧,最前面多了一列存儲(chǔ)了行號(hào)的字段名為num的列;
 (如果表內(nèi)主鍵id是自動(dòng)遞增的數(shù)字的話,也可以直接用id來分段取出記錄,但前提是id必須連續(xù)且自動(dòng)遞增)
 關(guān)于更多ROW_NUMBER()函數(shù)實(shí)現(xiàn)分頁(yè)的信息請(qǐng)參考:SQL Server使用row_number分頁(yè)的實(shí)現(xiàn)方法

②:MySQL分頁(yè)實(shí)現(xiàn)起來簡(jiǎ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)),官方文檔寫得很棒,簡(jiǎn)單易懂。
 在使用時(shí)要注意對(duì)于bootstrap V3版本來說,要使用<ul>標(biāo)簽來顯示bootstrap-paginator,并在配置項(xiàng)里注明所用bootstrap的版本(參考我jsp示例頁(yè)面的寫法)。
 (bootstrap V2版本直接使用示例文檔中的<div>標(biāo)簽即可)
 ④:分頁(yè)常用公式:設(shè)要顯示的頁(yè)數(shù)為 n ,每頁(yè)顯示 m 條數(shù)據(jù),則(數(shù)據(jù)庫(kù)中)待取數(shù)據(jù)的開始位置(即jsp示例中的startIndex)為: (n-1)*m+1,終止位置(endIndex)為:n*m

如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專題:

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

最新評(píng)論