ก่อนอื่นมาแนะนำ paginator ที่เรียบง่ายและประณีต: Bootstrap-Paginator คุณสามารถอ้างถึง: bootstrap paginator คำอธิบายโดยละเอียดเกี่ยวกับการใช้ปลั๊กอิน Paginator Paging บทความนี้ใช้สำหรับการเรียนรู้
ภาพหน้าจอเอฟเฟกต์:
GitHub อย่างเป็นทางการดาวน์โหลดที่อยู่: https://github.com/lyonlai/bootstrap-paginator
มาแนะนำกระบวนการใช้งานของการแสดงผลการเพจ JSP โดยใช้เครื่องมือเพจจิ้งนี้โดยละเอียด (หมายเหตุ: เปรียบเทียบกับหน้าเว็บดั้งเดิมฉันได้ซ่อนเนื้อหาที่ไม่จำเป็นจำนวนมากไว้และตัวอย่างนี้มุ่งเน้นไปที่การใช้งานการแสดงเพจ) เท่านั้น)
1. ทำไมคุณต้องแสดงการเพจ?
โพสต์บล็อกนี้อธิบายได้อย่างละเอียด: หลักการของเทคโนโลยีเพจและความสำคัญและวิธีการของการเพจ (I)
2. ส่วนหน้า JSP ที่นี่เชื่อมต่อโดยตรงกับฐานข้อมูล SQLServer2005 กับ JDBC ในหน้า JSP เพื่อสอบถามข้อมูล (ในการใช้งานจริงไม่แนะนำให้ห่อหุ้มตรรกะทางธุรกิจที่ซับซ้อนในหน้า JSP หน้า JSP ควรรับผิดชอบการแสดงผล
รหัสมีดังนี้:
<%@ page import = "paginationexample.*"%> <%@ page import = "java.util.*"%> <%@ page import = "java.sql.*"%> <%@ page language = "Java" contentType = "html; charset = utf-8 หน้าสุดท้ายคงที่ private int pageize = 20; // ตั้งค่าจำนวนระเบียนที่แสดงต่อหน้า (ปัจจุบัน 20 ระเบียนที่แสดงต่อหน้า)%> <% request.Setcharacterencoding ("UTF-8"); // ตั้งค่าเนื้อหาที่ส่งโดยไคลเอนต์ไปยัง servlet เป็นการตอบสนองการเข้ารหัส UTF-8 Setcharacterencoding ("UTF-8"); // ตั้งค่าเนื้อหาที่ส่งกลับไปยัง servlet ไปยังไคลเอนต์เป็น UTF-8 encoding response.setContentType ("text/html; charset = utf-8"); // แจ้งเบราว์เซอร์ให้แยกวิเคราะห์เนื้อหาในรูปแบบสตริง utf-8 pagenostr = request.getParameter ("pagenostr"); // รับจำนวนหน้าที่จะแสดงโดยไคลเอนต์ int pageno = 1; // จำนวนหน้าที่จะแสดง int totalPages = 1; // จำนวนหน้าทั้งหมด // ตรวจสอบและตั้งค่า pageno ถ้า (pagenostr! = null &&! pagenostr.equals ("")) {ลอง {pageno = integer.parseint (pagenostr); ถ้า (pageno <1) {// ถ้า pageno น้อยกว่า 1 หน้าแรกจะแสดงโดยค่าเริ่มต้น pageno = 1; }} catch (numberFormatexception e) {// เมื่อ pageno ที่ได้รับ (จำนวนหน้าปัจจุบัน) ผิดกฎหมายหน้าแรกจะแสดงโดย pageno เริ่มต้น = 1; }} else {// กรณีอื่น ๆ ที่ไม่ได้ดึง pageno จะแสดงโดยค่าเริ่มต้น pageno = 1; - - - *//*รับจำนวนหน้าทั้งหมดในฐานข้อมูลหลังจากบันทึกถูกเพจโดยหมายเลขที่ระบุ (หน้า)*/ การเชื่อมต่อ TotalConn = null; คำสั่งรวม stmt = null; Resultset totalrs = null; ลอง {totalConn = dButil.getConnection (); // สร้างสตริงคำสั่ง SQL SQLGETTOTALPAGES = "SELECT COUNT (*) จาก 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 (); } ในที่สุด {dbutil.close (TotalRs); dbutil.close (Totalstmt); dbutil.close (TotalConn); } /* หากจำนวนหน้ามากกว่าจำนวนหน้าทั้งหมดหน้าสุดท้ายจะแสดงโดยค่าเริ่มต้น* / if (pageno> totalPages) {pageno = TotalPages; } /* รับบันทึกการสังเกตที่จะแสดงในหน้าปัจจุบันในฐานข้อมูลและใช้รายการเพื่อจัดเก็บระเบียน* / list <record> records = new ArrayList <Oreched> (); การเชื่อมต่อ conn = null; PreparedStatement PSTMT = NULL; ผลลัพธ์ RS = NULL; int startIndex = (pageno - 1) * pagesize + 1; int endindex = pageno * pagesize; ลอง {conn = dbutil.getConnection (); String sql = "เลือก * จาก (เลือก row_number () มากกว่า (สั่งซื้อโดย data_taizhan_num, data_date asc) เป็น 'num', * จาก allldata) เป็นอุณหภูมิที่รวมระหว่าง" + startindex + "และ" + endindex; pstmt = conn.prepareStatement (SQL); rs = pstmt.executeQuery (); ในขณะที่ (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 สาธารณะ "-// 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 ที่เข้ากันได้ "เนื้อหา =" ie = edge "> <%-เรียกใช้โหมดการเรนเดอร์ล่าสุดใน IE-%> <meta name =" viewport "content =" width = ความกว้างของอุปกรณ์ rel = "stylesheet" href = "css/bootstrap.css"> <link rel = "stylesheet" href = "css/recordsearchResult.css"> <script type = "text/javascript" src = "js/jQuery src = "js/bootstrap.min.js"> </script> <script type = "text/javascript" src = "js/bootstrap-paginator.min.js"> </script> <title>-บันทึกการค้นหา-</title> </head> 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> ปริมาณน้ำฝน (มม.) </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> < %} %> < %ถ้า (บันทึก! = null && records.size ()! = 0) {สำหรับ (บันทึก r: บันทึก) { %> <tr> <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 dives div-> <div align = "center" >< ul id = "paginator"> </ul> bootstrapmajorversion: 3, // bootstrap ขนาดเวอร์ชันขนาด: 'ปกติ', itemtexts: ฟังก์ชัน (ประเภท, หน้า, ปัจจุบัน) {switch (type) {กรณี "แรก": return "home"; กรณี "prev": return "<i class = 'fa fa-caret-left'> </i> หน้าก่อนหน้า"; กรณี "ถัดไป": return "หน้าถัดไป <i class = 'fa fa-caret-right'> </i>"; กรณี "สุดท้าย": return "หน้าสุดท้าย"; กรณี "หน้า": หน้าส่งคืน; }}, ToolTiptItles: ฟังก์ชั่น (ประเภท, หน้า, ปัจจุบัน) {switch (type) {กรณี "แรก": return "homepage"; กรณี "prev": return "หน้าก่อนหน้า"; กรณี "ถัดไป": return "หน้าถัดไป"; กรณี "สุดท้าย": return "หน้าสุดท้าย"; กรณี "หน้า": ส่งคืน "เธรด" + หน้า + "หน้า"; }}, pageUrl: ฟังก์ชั่น (ประเภท, หน้า, ปัจจุบัน) {return "showinFosearchResult.jsp? pagenostr ="+หน้า; // ข้ามไปยังหน้าเลือก}, numberOfPages: 6, // จำนวนตัวเลือกที่จะแสดง "หน้า" ในปัจจุบันคือหน้า: < %= pageno %>, // หน้าปัจจุบันรวมหน้าทั้งหมด: < %= TotalPages %> // หน้าทั้งหมด} $ ('#paginator'). bootstrappaginator (ตัวเลือก); </script> </body> </html>3. เกี่ยวกับคลาสบันทึกและ dbutil ที่ใช้ในตัวอย่างนี้:
คลาสบันทึกเป็นคลาส Java ธรรมดาที่ห่อหุ้มข้อมูลและให้เฉพาะวิธีการรับ/set คุณสมบัติของมันสอดคล้องกับฟิลด์ที่มีอยู่ในตารางฐานข้อมูลทีละหนึ่ง รหัสมีดังนี้:
แพ็คเกจ paginationExample; นำเข้า Java.sql.*;/*** ห่อหุ้มข้อมูลข้อมูลอุตุนิยมวิทยา* @author Zhong**/บันทึกระดับสาธารณะ {Private String Taizhan_num; // ชื่อสถานีชื่อสตริงส่วนตัว tem; // อุณหภูมิสตริงส่วนตัวฮัม; // ความชื้นสตริงส่วนตัว PA; // ความดันสายฝนส่วนตัว // ปริมาณน้ำฝนส่วนตัว win_dir; // WIND Direction String ส่วนตัว win_sp; // วันที่ความเร็วช่วงเวลาการประทับเวลาส่วนตัวของลม; // วันที่สังเกต (รูปแบบดั้งเดิม) /*** รับชื่อของสถานีที่สร้างบันทึกการสังเกต; * @return ชื่อสถานี*/ สตริงสาธารณะ getTaizhan_num () {return taizhan_num; } /*** ตั้งชื่อสถานีที่สร้างบันทึกการสังเกต; * @param taizhan_num ชื่อสถานีที่จะตั้งค่า*/ โมฆะสาธารณะ settaizhan_num (สตริง taizhan_num) {this.taizhan_num = taizhan_num; } /*** รับอุณหภูมิ; * @return ค่าอุณหภูมิ*/ สตริงสาธารณะ getTem () {return tem; } /*** ตั้งอุณหภูมิ; * @param tem ค่าอุณหภูมิที่จะตั้งค่า*/ public void settem (String tem) {this.tem = tem; } /*** รับความชื้น; * @return ค่าความชื้น*/ สตริงสาธารณะ gethum () {return hum; } /*** ตั้งค่าความชื้น; * @param hum hum ที่จะตั้งค่า*/ โมฆะสาธารณะ sethum (hum string) {this.hum = hum; } /*** รับแรงกดดัน; * @return ค่าความดัน*/ สตริงสาธารณะ getpa () {return pa; } /*** ตั้งค่าความดัน; * @param pa ที่จะตั้งค่า*/ โมฆะสาธารณะ setpa (สตริง Pa) {this.pa = pa; } /*** รับปริมาณน้ำฝน * @return ค่าปริมาณน้ำฝน */ สตริงสาธารณะ getRain () {คืนฝน; } /*** ตั้งค่าปริมาณน้ำฝน * @param ฝนที่จะตั้งค่าฝน */ โมฆะสาธารณะ setrain (สายฝนสตริง) {this.rain = rain; } /*** รับทิศทางลม; * @return ค่าทิศทางลม */ สตริงสาธารณะ getwin_dir () {return win_dir; } /*** ตั้งทิศทางลม; * @param win_dir เป็นค่าทิศทางลม */ โมฆะสาธารณะ setwin_dir (สตริง win_dir) {this.win_dir = win_dir; } /*** รับความเร็วลม * @return ค่าความเร็วลม */ สตริงสาธารณะ getwin_sp () {return win_sp; } /*** ตั้งทิศทางลม * @param win_sp ค่าทิศทางลมที่จะตั้งค่า*/ โมฆะสาธารณะ setwin_sp (สตริง win_sp) {this.win_sp = win_sp; } /*** รับวันที่สังเกต; * @return วันที่สังเกต*/ การประทับเวลาสาธารณะ getDate () {วันที่ส่งคืน; } /*** ตั้งวันที่สังเกต; * @param วันที่สังเกตค่าวันที่*/ โมฆะสาธารณะ setDate (วันที่ timestamp) {this.date = วันที่; -ภาพหน้าจอของตาราง Alldata ที่สอดคล้องกัน:
คลาส DBUTIL เป็นคลาสเครื่องมือฐานข้อมูลที่ให้การเชื่อมต่อที่เกี่ยวข้องกับฐานข้อมูลคำสั่ง ฯลฯ ด้วยรหัสต่อไปนี้:
แพ็คเกจ paginationxample; นำเข้า Java.sql. *; นำเข้า org.apache.tomcat.jdbc.pool.datasource; นำเข้า org.apache.tomcat.jdbc.pool.poolproperties;/** DS; คงที่ {// กำหนดค่า Tomcat JDBC Pool (การเชื่อมต่อพูล) PoolProperties p = ใหม่ poolproperties (); P.Seturl ("JDBC: SQLServer: // localhost: 1433; databasename = Weather"); // ตั้งค่า URL ที่เชื่อมต่อ P.SetDriverClassName ("com.microsoft.sqlserver.jdbc.sqlserverdriver"); // โหลดไดรเวอร์ฐานข้อมูล p.setUserName ("SA"); // ชื่อผู้ใช้สำหรับการเชื่อมต่อระยะไกล P.SetPassword ("2003NiANDIDIICHANGXUE"); // รหัสผ่าน p.setjmxenabled (จริง); P.Settesthialidle (เท็จ); P.SetTestonBorrow (จริง); P.SetValidationQuery ("เลือก 1"); P.SettestonReturn (เท็จ); P.SetValidationInterval (30000); P.SettimeBetweenevictionRunsmillis (30000); P.SetMaxactive (100); P.SetInitialSize (10); P.SetMaxWait (10,000); P.SetRemoveAbandonedTimeOut (60); P.SetMinevictableidletImeMillis (30000); P.SetMinidle (10); P.Setlogabandoned (จริง); P.SetRemoveAbandoned (จริง); P.SetJdBcInterceptors ("org.apache.tomcat.jdbc.pool.interceptor.connectionstate;"+ "org.apache.tomcat.jdbc.pool.interceptor.statementfinalizer"); ds = dataSource ใหม่ (); ds.setpoolproperties (p); } ส่วนตัว dbutil () {} /*** รับการเชื่อมต่อฐานข้อมูล (การเชื่อมต่อ); * @return การเชื่อมต่อฐานข้อมูล */ การเชื่อมต่อแบบคงที่สาธารณะ getConnection () {การเชื่อมต่อ conn = null; ลอง {conn = ds.getConnection (); } catch (sqlexception e) {e.printstacktrace (); } return conn; } /*** ปิดการเชื่อมต่อที่เข้ามา; * @param Conn Connection ที่จะปิด */ Public Static Void Close (Connection Conn) {ลอง {ถ้า (conn! = null) {conn.close (); conn = null; }} catch (sqlexception e) {e.printstacktrace (); }} /*** ปิดคำสั่งขาเข้า; * @param stmt คำสั่งที่จะปิด */ โมฆะคงที่สาธารณะปิด (คำสั่ง stmt) {ลอง {ถ้า (stmt! = null) {stmt.close (); stmt = null; }} catch (sqlexception e) {e.printstacktrace (); }} /*** ปิดชุดผลลัพธ์ที่เข้ามา; * @param rs resultset ที่จะปิด */ โมฆะคงที่สาธารณะปิด (Resultset rs) {ลอง {ถ้า (rs! = null) {rs.close (); rs = null; }} catch (sqlexception e) {e.printstacktrace (); -4. หมายเหตุเพิ่มเติม:
①: เมื่อ SQLServer ใช้การเพจจำเป็นต้องใช้ฟังก์ชัน row_number () เพื่อสร้างคอลัมน์ที่บันทึกหมายเลขแถวแยกกันเพื่ออำนวยความสะดวกในการเพจการเพจที่ตามมาของช่วงเวลาหมายเลขแถวที่สอดคล้องกัน ตัวอย่าง:
ฉันเห็นว่ามีคอลัมน์อยู่ด้านหน้าซึ่งมีหมายเลขแถวชื่อ NUM ที่มีชื่อฟิลด์ของหมายเลขแถว
(หากรหัสคีย์หลักในตารางเป็นหมายเลขที่เพิ่มขึ้นโดยอัตโนมัติคุณยังสามารถใช้ ID เพื่อดึงข้อมูลบันทึกในเซ็กเมนต์ แต่หลักฐานคือ ID จะต้องเพิ่มขึ้นอย่างต่อเนื่องและเพิ่มขึ้นโดยอัตโนมัติ)
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้งาน Paging By Row_number () ฟังก์ชั่นโปรดดูที่: วิธีการใช้งานของ SQL Server ของการใช้ Paging Row_number
②: MySQL Pagination นั้นง่ายกว่ามากในการใช้งานเพียงแค่ใช้คำหลักขีด จำกัด ตัวอย่าง:
เลือก * จากตารางที่ 1 คำสั่งซื้อโดย ID ASC Limit 3, 2 หมายความว่าหลังจากเรียงลำดับข้อมูลในตารางที่ 1 ตามค่า ID (คำสั่ง ASC) เริ่มจากแถวที่สามให้ใช้บันทึกสองแถวถัดไป (เช่นบันทึกแถวที่สี่และห้า)
③: สำหรับการใช้งานเฉพาะของ bootstrap-paginator คุณสามารถอ้างถึงเอกสารอย่างเป็นทางการ (อยู่ในโฟลเดอร์เอกสารหลังจากการบีบอัด) เอกสารอย่างเป็นทางการเขียนได้ดีและเรียบง่ายและเข้าใจง่าย
เมื่อใช้รุ่น Bootstrap V3 คุณควรใช้แท็ก <ul> เพื่อแสดง bootstrap-paginator และระบุเวอร์ชันของ bootstrap ที่ใช้ในรายการการกำหนดค่า (ดูวิธีการเขียนหน้าตัวอย่าง JSP ของฉัน)
(สามารถใช้เวอร์ชัน Bootstrap V2 ได้โดยตรงโดยใช้แท็ก <div> ในเอกสารตัวอย่าง)
④: สูตรที่ใช้กันทั่วไปสำหรับการปนเปื้อน: สมมติว่าจำนวนหน้าที่จะแสดงคือ n และชิ้นส่วนข้อมูล m จะแสดงในแต่ละหน้าจากนั้นตำแหน่งเริ่มต้น (นั่นคือ startIndex ในตัวอย่าง JSP) ของข้อมูลที่จะดึงคือ: (N-1)*M+1
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น