먼저 간단하고 깔끔한 페이지 인 부트 스트랩 파이낸터를 소개하겠습니다. Bootstrap Paginator를 참조하십시오. 이주자 페이징 플러그인 사용에 대한 자세한 설명. 이 기사는 학습에 사용됩니다.
효과 스크린 샷 :
Github 공식 다운로드 주소 : https://github.com/lyonlai/bootstrap-paginator
이 페이징 도구를 기반으로 JSP 페이징 디스플레이의 구현 프로세스를 자세히 소개 해 봅시다 (참고 : 원래 웹 페이지와 비교하여 불필요한 컨텐츠가 많이 숨겨져 있으며이 예제는 페이징 디스플레이의 구현에만 중점을 둡니다).
1. 왜 페이징을 표시해야합니까?
이 블로그 게시물은 그것을 철저히 설명합니다 : 페이징 기술의 원칙과 페이징의 중요성과 방법 (i)
2. JSP 페이지 부분 , 여기서 JSP 페이지에 JDBC가있는 SQLServer2005 데이터베이스에 직접 연결하여 데이터를 쿼리하기 위해 (실제 구현에서는 JSP 페이지에서 복잡한 비즈니스 로직을 캡슐화하는 것이 좋습니다.
코드는 다음과 같습니다.
<%@ page import = "PaginationExample.*"%> <%@ page import = "java.util.*"%> <%@ page import = "java.sql.*"%> <%@ page language = "java"contenttype = "text/html; charset = utf-8"pageencoding = "utf-8"%! 비공개 정적 최종 int pagesize = 20; // 페이지 당 표시되는 레코드 수를 설정합니다 (현재 페이지 당 표시되는 20 개의 레코드)%> <% request.SetchAracterEncoding ( "UTF-8"); // 클라이언트가 제출 한 컨텐츠를 Servlet에 UTF-8 인코딩 응답으로 설정합니다 .SetchAracterEncoding ( "UTF-8"); // utf-8 인코딩 응답으로 보낸 컨텐츠를 클라이언트로 다시 설정합니다. // utf-8 형식의 문자열 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; 문장 TotalStmt = null; resultSet totalrs = null; try {totalconn = dbutil.getConnection (); // sql 문을 생성 문자열 sqlgetTotalPages = "AllData에서 count (*)를 선택하십시오."; // 총 레코드 수를 가져옵니다. 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 (); } 마침내 {dbutil.close (Totalrs); dbutil.close (Totalstmt); dbutil.close (Totalconn); } /* 페이지 수가 총 페이지 수보다 큰 경우 마지막 페이지는 기본적으로 표시됩니다* / if (pageno> TotalPages) {pageno = TotalPages; } /* 데이터베이스의 현재 페이지에 관찰 레코드를 표시하고 목록을 사용하여 레코드를 저장하십시오* / list <crecort> 레코드 = new ArrayList <crect> (); 연결 Conn = null; 준비된 상태 PSTMT = NULL; resultSet rs = null; int startIndex = (pageno -1) * pagesize + 1; int endindex = pageno * pagesize; try {conn = dbutil.getConnection (); 문자열 sql = "select * from (select row_number () Over (data_taizhan_num, data_date asc by data_taizhan_num, data_date asc), 'num', * alldata에서 *)는" + startIndex + "와" + endIndex 사이의 num; PSTMT = CONN.PREPARESTATEMENT (SQL); rs = pstmt.executeQuery (); while (rs.next ()) {// 각 레코드의 데이터를 꺼내 레코드 객체 레코드로 캡슐화합니다 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); // 캡슐화 된 레코드 객체를 목록 컨테이너에 넣습니다}} catch (sqlexception e) {System.out.println ( "쿼리 오류, 작업이 완료되지 않음!"); e.printstacktrace (); } 마침내 {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 "> charset = utf-8 "> <meta http-equiv ="x-ua-catsible "content ="ie = edge "> <%-IE에서 최신 렌더링 모드를 실행합니다-%> <meta name ="viewport "content ="width = "vefice-width, initial-scale = 1"> <%-Meta name = meta name = "dreamer" 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"> src = "js/bootstrap.min.js"> </script> <script type = "text/javaScript"src = "js/bootstrap-paginator.min.js"> </script> <div> <! </title> </head> <body> <div> <!- 형식 사용-<table> <table> <%> ||. } else { %> <td> <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> Rainfall (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>"); . 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> <!-Pagination Display Div-> <div align = "center"> <ul id = "Paginator"> </ul> </div> </form> < %} %> </div> <script type = 'text/javascript'> Bootstrapmajorversion : 3, // 부트 스트랩 버전 크기 : '정상', itemtexts : 함수 (유형, 페이지, 현재) {switch (type) {case "first": return "home"; 사례 "prev": return "<i class = 'fa fa-caret-left'> </i> 이전 페이지"; 사례 "다음": 반환 "다음 페이지 <i class = 'fa fa-caret-right'> </i>"; 사례 "마지막": "마지막 페이지를 반환"; 사례 "페이지": 반환 페이지; }}, ToolTiptItles : function (type, page, current) {switch (type) {case "first": return "homePage"; 사례 "이전": "이전 페이지"반환; 사례 "다음": "다음 페이지"반환; 사례 "마지막": "마지막 페이지를 반환"; CASE "PAGE": return "Thread" + Page + "Page"; }}, pageurl : function (type, page, current) {return "showinfosearchresult.jsp? pagenostr ="+page; // 선택한 페이지로 건너 뛰기}, numberofPages : 6, // "어느 페이지"를 표시 할 옵션 수 : < %= pageno %>, // 현재 페이지 TotalPages : < %= TotalPages %> // Total Pages} $ ( '#paginator'). BOOTSTRAPPAGINATOR (옵션); </script> </body> </html>3.이 예제에 사용 된 레코드 및 dbutil 클래스와 관련하여 :
레코드 클래스는 데이터를 캡슐화하고 get/set 메소드 만 제공하는 일반적인 Java 클래스입니다. 그 속성은 데이터베이스 테이블에 하나씩 포함 된 필드에 해당합니다. 코드는 다음과 같습니다.
패키지 PaginationExample; import java.sql.*;/*** 기상 데이터 정보 캡슐화* @Author Zhong**/public class record {private String taizhan_num; // 스테이션 이름 개인 문자열 TEM; // 온도 개인 문자열 HUM; // 습도 개인 문자열 PA; // 압력 개인 문자열 비; // Rainfall Private String Win_dir; // 바람 방향 개인 문자열 win_sp; // 풍속 개인 타임 스탬프 날짜; // 관측 날짜 (원본 형식) /*** 관찰 레코드를 생성 한 스테이션의 이름을 얻습니다. * @return station name*/ 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 hum 설정*/ public void sethum (String Hum) {this.hum = hum; } /*** 압력을받습니다. * @return 압력 값*/ public String getPa () {return pa; } /*** 압력 설정; * @param pa 설정*/ public void setpa (문자열 pa) {this.pa = pa; } /*** 강우 받기; * @return Rainfall Value */ public String getRain () {반환 비; } /*** 강우 설정; * @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 () {반환 날짜; } /*** 관찰 날짜를 설정합니다. * @param 날짜 관찰 날짜 값*/ public void setDate (timestamp date) {this.date = date; }}해당 AllData 테이블의 스크린 샷 :
DBUTIL 클래스는 데이터베이스 관련 연결, 문 등을 제공하는 데이터베이스 도구 클래스입니다. 다음 코드는 다음과 같습니다.
패키지 PaginationExample; import java.sql. *; import org.apache.tomcat.jdbc.pool.datasource; import org.apache.tomcat.jdbc.pool.poolproperties;/** * database 도구 클래스 (Tomcat JDBC 사용) * @Author Zhong */public classe */public classe */public classe {public classe {public classe {public classe */public classe */ DS; static {// tomcat JDBC 풀 (연결 풀) 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. 세트 테스트 론트 턴 (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.setLogAbanding (true); p.setRemoveaBandoned (true); p.setjdbcinterceptors ( "org.apache.tomcat.jdbc.pool.interceptor.connectionstate;"+ "org.apache.tomcat.jdbc.pool.statementfinalizer"); ds = 새로운 DataSource (); ds.setpoolproperties (p); } private dbutil () {} /*** 데이터베이스 연결 (연결)을 가져옵니다. * @return 데이터베이스 연결 */ public static connection getConnection () {Connection conn = null; try {conn = ds.getConnection (); } catch (sqlexception e) {e.printstacktrace (); } return conn; } /*** 들어오는 연결을 닫습니다. * @param conn 연결을 닫을 */ public static void close (Connection Conn) {try {if (conn! = null) {conn.close (); conn = null; }} catch (sqlexception e) {e.printstacktrace (); }} /*** 들어오는 진술을 닫습니다. * 닫는 @param stmt 문을 닫을 */ public static void close (statement stmt) {try {if (stmt! = null) {stmt.close (); stmt = null; }} catch (sqlexception e) {e.printstacktrace (); }} /*** 들어오는 결과 세트를 닫습니다. * @param rs resultet 닫을 */ public static void close (resultset rs) {try {if (rs! = null) {rs.close (); rs = null; }} catch (sqlexception e) {e.printstacktrace (); }}}4. 보충 참고 :
① : SQLServer가 페이징을 구현하면 Row_number () 함수를 사용하여 해당 행 번호 간격의 후속 페이징을 용이하게하기 위해 행 번호를 별도로 기록하는 열을 생성해야합니다. 예:
앞에 열 번호의 필드 이름을 가진 NUM이라는 행 번호가있는 열이 있음을 알았습니다.
(테이블의 기본 키 ID가 자동으로 증가한 숫자 인 경우 ID를 사용하여 세그먼트에서 레코드를 검색 할 수도 있지만 전제는 ID가 지속적이고 자동으로 증가해야한다는 것입니다).
row_number () 함수로 페이징 구현에 대한 자세한 내용은 다음을 참조하십시오.
② : MySQL Pagination은 구현하기가 훨씬 간단합니다. 제한 키워드 만 사용하십시오. 예:
id asc limit 3, 2에 의한 * table1 Order에서 *를 선택한 * 세 번째 줄에서 시작하여 ID 값 (ASC Order)으로 데이터를 정렬 한 후 다음 두 행의 레코드 (즉, 네 번째 및 제 5 행 레코드)를 선택한다는 것을 의미합니다.
③ : 부트 스트랩-파 지간지의 특정 사용에 대해서는 공식 문서 (감압 후 문서 폴더에있는)를 참조 할 수 있습니다. 공식 문서는 매우 잘 쓰여지고 간단하며 이해하기 쉽습니다.
Bootstrap v3 버전을 사용하는 경우 <ul> 태그를 사용하여 Bootstrap-Paginator를 표시하고 구성 항목에 사용되는 Bootstrap 버전을 표시해야합니다 (JSP 예제 페이지 작성 방법 참조).
(부트 스트랩 v2 버전은 샘플 문서에서 <div> 태그를 사용하여 직접 사용할 수 있습니다)
④ : Pagination에 일반적으로 사용되는 공식 : 표시 할 페이지의 수가 N이고 각 페이지에 M 데이터가 표시된 다음, 검색 할 데이터의 시작 위치 (즉, JSP 예의 STARTINDEX)가 다음과 같습니다.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.