Lassen Sie uns zunächst einen einfachen und ordentlichen Paginator vorstellen: Bootstrap-Paginator. Sie können sich beziehen: Bootstrap -Paginator. Detaillierte Erläuterung der Verwendung des Paginator -Paging -Plugins. Dieser Artikel wird zum Lernen verwendet.
Effekt Screenshot:
GitHub Offizielle Download-Adresse: https://github.com/lyonlai/bootstrap-paginator
Lassen Sie uns den Implementierungsprozess der JSP Paging -Anzeige basierend auf diesem Paging -Tool ausführlich vorstellen (Hinweis: Im Vergleich zur ursprünglichen Webseite habe ich viele unnötige Inhalte versteckt, und dieses Beispiel konzentriert sich nur auf die Implementierung der Paging -Anzeige).
1. Warum müssen Sie Paging anzeigen?
Dieser Blog -Beitrag erklärt es gründlich: die Prinzipien der Paging -Technologie sowie die Bedeutung und Methoden des Paging (i)
2. JSP -Seitenteil , hier direkt eine Verbindung zum SQLSERVER2005 -Datenbank mit JDBC auf der JSP -Seite zu Abfragedaten (in der tatsächlichen Implementierung wird nicht empfohlen, komplexe Geschäftslogik auf der Seite JSP -Seite zu verkörpern, die JSP -Seite sollte nur für die Anzeige verantwortlich sein;
Der Code ist wie folgt:
<%@ page import = "paginationExample.*"%> <%@ page import = "java.util.*"%> <%@ page import = "java.sql. private statische endgültige int pageSize = 20; // Die Anzahl der pro Seite angezeigten Datensätze festlegen (derzeit 20 Datensätze pro Seite angezeigt)%> <% request.setcharactercoding ("utf-8"); // Setzen Sie den vom Client als UTF-8-Codierungsantwort des Clients übermittelten Inhalte. // Setzen Sie den Inhalt, der an das Servlet an den Client zurückgeschickt wurde, als UTF-8-Codierungsantwort. // den Browser informieren, um den Inhalt in UTF-8-Format-String-String pagestr = request.getParameter ("pagenostr") analysieren; // Erhalte die Anzahl der Seiten, die vom Client int pageno = 1 angezeigt werden sollen; // die Anzahl der Seiten, die int insgesamt angezeigt werden sollen = 1; // Gesamtzahl der Seiten // pageno if (pagenostr! if (pageno <1) {// Wenn Pageno weniger als 1 ist, wird die erste Seite standardmäßig pageno = 1 angezeigt; }} catch (numberFormatexception e) {// Wenn der erhaltene Pageno (aktuelle Anzahl der Seiten) illegal ist, wird die erste Seite standardmäßig pageno = 1 angezeigt; }} else {// andere Fälle, in denen Pageno nicht abgerufen wurde, werden standardmäßig pageno = 1 angezeigt; } /* ================================================================= ================================================================= *//*Die Gesamtzahl der Seiten in der Datenbank abrufen, nachdem die Datensätze von der angegebenen Zahl (pageSize)*/ Verbindung TotalConn = null; Anweisung Totalstmt = null; ResultSet TotalRS = null; try {TotalConn = dbutil.getConnection (); // SQL Anweisung String SQLGettTotAlpages = "Wählen Sie count (*) aus Alldata"; // Die Gesamtzahl der Datensätze Totalstmt = TotalConn.CreateStatement () erhalten; TotalRS = TotalStMt.ExecuteQuery (SQLGettTotAlpages); TotalRS.Next (); int countresult = totalRs.getint (1); // Erhalten Sie die Gesamtzahl der Seiten insgesamt = Countresult % PageSize == 0? Countrinult / PageSize: (int) (Countrinult / PageSize) + 1; } catch (SQLEXception e) {System.out.println ("Ein Fehler in der Verlaufsabfrage, die Operation wurde nicht abgeschlossen!"); E. printstacktrace (); } endlich {dbutil.close (TotalRS); Dbutil.close (totalstmt); Dbutil.close (TotalConn); } /* Wenn die Anzahl der Seiten größer ist als die Gesamtzahl der Seiten, wird die letzte Seite standardmäßig angezeigt* / if (pageno> Gesamtpagen) {pageno = insgesamt; } /* Erhalten Sie die Beobachtungsdatensätze, die in der aktuellen Seite in der Datenbank angezeigt werden sollen, und speichern Sie eine Liste, um die Datensätze zu speichern. Verbindung conn = null; PrepedStatement pstmt = null; ResultSet rs = null; int startIndex = (pageno - 1) * pageSize + 1; int EndIndex = pageno * pageSize; try {conn = dbutil.getConnection (); String sql = "Select * aus (select row_number () over (order by data_ttaizhan_num, data_date asc) als 'num', * aus Alldata) als Temp, wobei num zwischen" + startIndex + "und" + endindex; pstmt = conn.preparestatement (SQL); rs = pstmt.executeQuery (); while (rs.Next ()) {// Die Daten jedes Datensatzes ausnehmen und in einen Datensatzobjektdatensatz in Einklang bringen r = neuer Datensatz (); 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); // Das eingekapselte Datensatzobjekt in den Listencontainer einfügen}} catch (SQLEXception e) {System.out.println ("Abfragefehler, Operation nicht abgeschlossen!"); E. printstacktrace (); } endlich {dbutil.close (rs); Dbutil.close (pstmt); Dbutil.close (conn); } System.out.println (Gesamtpagen); System.out.println(pageNo);/* ==================================================================================================*/ %> <! DocType html public "-// w3c // dtd html 4.01 transitional // en" "http://www.w3.org/tr/html4/loose charset = utf-8 "> <meta http-äquiv =" x-ua-kompatible "content =" ie = edge "> <%-Führen Sie den neuesten Rendering-Modus in IE-%> <meta name =" ViewPort "content =" Width = Gerätebidth, initial-scale = 1 "> <%-Initialize-Mobile Browsing-Anzeige-ISGINE-ISGINE-Anzeige-ISGING-ISGING-ISGING-ISGING-ISGINE-ISGINE-ISGINE-ISGINE-ISGING-ISGINE-ISGINE-ISGINE-ISGINE-ISGINE-ISGINE-ISGING-ISGING-ISGINE-ISGINE-ISGINE-ISGING ASGINAI. rel = "styleSheet" href = "css/bootstrap.css"> <link rel = "styleSheet" href = "css/recordsearchResult.css"> <script type = "text/javascript" src = "js/jquery-1. src = "js/bootstrap.min.js"> </script> <script type = "text/javaScript" src = "js/bootstrap-paginator.min.js"> </script> <titels>-Suchrekord-</title> </head> <body> <div> <! records.size () == 0) {out.println ("<tr> <td> <h4> <strong> Keine Datensätze, die den Anforderungen entsprechen, warum nicht die Suchkriterien ~ </strong> </h4> </td> </tr>"); } else { %> <tr> <td> <h4> <strong> Beobachtungsstation </strong> </h4> </td> < % record r = records.get (0); if (r.gettem ()! } if (r.gethum ()! } if (r.getPa ()! } if (r.getrain ()! } if (r.getWin_dir ()! } if (r.getWin_sp ()! } %> <td> <h4> <strong> Beobachtungszeit </strong> </h4> </td> </tr> < %} %> < %if (records! = null && records.size ()! {out.println ("<td>" + r.gettem () + "</td>"); } if (r.gethum ()! } if (r.getPa ()! } if (r.getrain ()! = null) {out.println ("<td>" + r.getrain () + "</td>"); } if (r.getwin_dir ()! } if (r.getWin_sp ()! } %> <td><%= r.getDate() %></td> </tr> <% } %> </table> <!-- Pagination display div --> <div align="center"> <ul id="paginator"></ul> </div> </form> <% } %> </div> </div> <script type='text/javascript'> var options = { Bootstrapmajorversion: 3, // Bootstrap -Version Größe: 'Normal', itemTexts: Funktion (Typ, Seite, aktuell) {Switch (Typ) {case "First": return "home"; Fall "prev": return "<i class = 'fa fa-caret-links'> </i> vorherige Seite"; Fall "Weiter": zurück "Nächste Seite <i class = 'fa fa-caret-right'> </i>"; Fall "letztes": zurück "letzte Seite"; Fall "Seite": Rückgabeseite; }}, Tooltiptitles: Funktion (Typ, Seite, aktuell) {Switch (Typ) {case "First": return "homepage"; Fall "prev": zurück "vorherige Seite"; Fall "Weiter": Rückkehr "nächste Seite"; Fall "letztes": zurück "letzte Seite"; Fall "Seite": Rückgabe "Thread" + Seite + "Seite"; }}, pageurl: function (Typ, Seite, aktuell) {return "showInfosearchResult.jsp? pagenoStr ="+Seite; // Überspringen Sie zur ausgewählten Seite}, NummerOfPages: 6, // Anzahl der zum Anzeigen "auf welchen Seite" derzeit "Pageno %>, // Aktuelle Seiten Gesamtpagne: < %= TotalPages %> // Gesamtseiten} $ ("#paginator "). BootStrappaginator (Optionen); </script> </body> </html>3.. In Bezug auf die in diesem Beispiel verwendeten Datensatz- und Dbutil -Klassen:
Die Datensatzklasse ist eine gewöhnliche Java -Klasse, die Daten zusammenfasst und nur GET/SET -Methoden bereitstellt. Seine Eigenschaften entsprechen den Feldern, die in der Datenbanktabelle eins nacheinander enthalten sind. Der Code ist wie folgt:
Paket paginationExample; importieren java.sql. // Stationsname private Zeichenfolge TEM; // Temperatur Private Saite Sum; // Feuchtigkeit private String Pa; // Druck privater Schnur Regen; // Niederschlag privat String win_dir; // Windrichtung private String win_sp; // Windgeschwindigkeit privates Zeitstempeldatum; // Beobachtungsdatum (Originalformat) /*** Erhalten Sie den Namen der Station, die den Beobachtungsdatensatz generierte; * @return Station Name*/ public String gettaizhan_num () {return taizhan_num; } /*** Legen Sie den Namen der Station ein, die den Beobachtungsdatensatz erzeugt; * @param taizhan_num Der Stationsname soll festgelegt werden } /*** die Temperatur erhalten; * @Return Temperaturwert*/ public String getTem () {return tem; } /*** die Temperatur einstellen; * @param tem Der zu setzen*/ public void settem (String tem) {this.tem = tem; } /*** Holen Sie sich Feuchtigkeit; * @return Feuchtigkeitswert*/ public String gethum () {return hum; } /*** Feuchtigkeit setzen; * @param hum hum set } /*** Druck erhalten; * @Return Druckwert*/ public String getPa () {return pa; } /*** Druck setzen; * @param pa zu setzen*/ public void setpa (string pa) {this.pa = pa; } /*** Niederschlag bekommen; * @Return Niederschlagswert */ public String getrain () {return rain; } /*** Niederschlag setzen; * @param regen, um Regenwert zu setzen } /*** Windrichtung erhalten; * @return Wind Direction Value */ public String getwin_dir () {return win_dir; } /*** Windrichtung einstellen; * @param win_dir, um Windrichtung Wert zu setzen } /*** Windgeschwindigkeit erhalten; * @return Windgeschwindigkeitswert */ public String getwin_sp () {return win_sp; } /*** die Windrichtung einstellen; * @param win_sp Der zu setzende Windrichtungswert*/ public void setwin_sp (string win_sp) {this.win_sp = win_sp; } /*** das Beobachtungsdatum erhalten; * @Return Beobachtungsdatum*/ public Timestamp getDate () {Rückgabedatum; } /*** das Beobachtungsdatum festlegen; * @param Datum Beobachtungsdatum Wert*/ public void setDate (Zeitstempeldatum) {this.date = Datum; }}Screenshot der entsprechenden Alldata -Tabelle:
Die DBUTIL-Klasse ist eine Datenbank-Tool-Klasse, die Datenbankverbindungen, Anweisungen usw. mit dem folgenden Code bereitstellt:
Paket paginationExample; import java.sql. *; import org.apache.tomcat.jdbc.pool.dataSource; DS; static {// Tomcat JDBC Pool (Verbindungspool) Poolproperties p = neue Poolproperties (); P.Seturl ("JDBC: SQLSERVER: // LOCALHOST: 1433; Databasename = Wetter"); // Setzen Sie den angeschlossenen URL P.SetDriverClassName ("com.microsoft.sqlserver.jdbc.sqlserverdriver"); // den Datenbanktreiber P.Setusername ("sa") laden; // Benutzername für Remote Connection P.SetPassword ("2003Niandediyichangxue"); // Passwort p.Setjmxenabled (true); P.SetthestHeIdle (falsch); P.Settestonborrow (wahr); P.SetValidationQuery ("Select 1"); P.SettestonReturn (falsch); 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.SetLogAboned (wahr); P.SetremoveAbandoned (wahr); P.Setjdbcinterceptors ("org.apache.tomcat.jdbc.pool.Interceptor.connectionState;"+ "org.apache.tomcat.jdbc.pool.Interceptor.StatementFinalizer"); ds = new DataSource (); dsetpoolproperties (p); } private dButil () {} /*** eine Datenbankverbindung (Verbindung) erhalten; * @return Database Connection */ öffentliche statische Verbindung getConnection () {Connection conn = null; try {conn = ds.getConnection (); } catch (sqlexception e) {e.printstacktrace (); } return conn; } /*** Schließen Sie die eingehende Verbindung; * @param conn Verbindung zu geschlossen sein */ public static void close (Verbindung conn) {try {if (conn! = null) {conn.close (); conn = null; }} catch (sqlexception e) {e.printstacktrace (); }} /*** Schließen Sie die eingehende Anweisung; * @param stmt Anweisung geschlossen werden */ public static void close (Anweisung stmt) {try {if (stmt! = null) {stmt.close (); stmt = null; }} catch (sqlexception e) {e.printstacktrace (); }} /*** Schließen Sie das eingehende Ergebnis; * @param rs resultset soll geschlossen sein rs = null; }} catch (sqlexception e) {e.printstacktrace (); }}}4. ergänzende Anmerkung:
①: Wenn SQLServer das Paging implementiert, muss die Funktion row_number () eine Spalte generieren, in der die Zeilennummer separat aufgezeichnet wird, um die nachfolgende Paging des entsprechenden Zeilennummerintervalls zu erleichtern. Beispiel:
Ich sah, dass es eine Spalte davor gab, die eine Zeilennummer namens Num mit dem Feldnamen der Zeilennummer hatte;
(Wenn die primäre Schlüssel -ID in der Tabelle eine automatisch inkrementierte Zahl ist, können Sie auch die ID verwenden, um den Datensatz in Segmenten abzurufen. Die Prämisse ist jedoch, dass die ID kontinuierlich und automatisch inkrementiert sein muss)
Weitere Informationen zur Implementierung von Paging nach row_number () -Funktion finden Sie unter: SQL Server -Implementierungsmethode zur Verwendung von Row_Number Paging
②: Die MySQL -Pagination ist viel einfacher zu implementieren. Verwenden Sie einfach das Schlüsselwort Limit. Beispiel:
Wählen Sie * aus Tabelle 1 Reihenfolge nach ID -ASC -Grenze 3, 2 bedeutet, dass nach der Sortierung der Daten in Tabelle 1 nach ID -Wert (ASC -Bestellung) in den nächsten zwei Zeilen von Datensätzen (d. H. Die vierten und fünften Zeilenaufzeichnungen) in die nächsten zwei Zeilen nehmen, um zu sortieren.
" Das offizielle Dokument ist sehr gut geschrieben und einfach und leicht zu verstehen.
Wenn Sie die Bootstrap V3-Version verwenden, sollten Sie das <ul> -Tag zum Anzeigen von Bootstrap-Paginator verwenden und die im Konfigurationselement verwendete Version von Bootstrap angeben (siehe My JSP-Beispiel-Seite Schreibmethode).
(Die Bootstrap V2 -Version kann direkt mit dem <Div> -Tag im Beispieldokument verwendet werden)
④: häufig verwendete Formeln für Pagination: Angenommen, die Anzahl der zu angezeigten Seiten ist n und m Datenstücke werden auf jeder Seite angezeigt, dann ist die Startposition (dh der Startindex im JSP-Beispiel) der zu abgerufenen Daten: (n-1)*m+1 und die Endposition (EndIndex): N*m*m
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.