Tout d'abord, présentons un paginateur simple et soigné: Bootstrap-Paginator. Vous pouvez vous référer à: Bootstrap Paginator. Explication détaillée de l'utilisation du plugin Paginator Paging. Cet article est utilisé pour l'apprentissage.
Capture d'écran d'effet:
Adresse de téléchargement officiel de GitHub: https://github.com/lyonlai/bootstrap-paginator
Présentez le processus d'implémentation de l'affichage de pagination JSP en fonction de cet outil de pagination en détail (Remarque: Par rapport à la page Web d'origine, j'ai caché beaucoup de contenu inutile, et cet exemple ne se concentre que sur l'implémentation de l'affichage de la pagination)
1. Pourquoi avez-vous besoin d'afficher la pagination?
Ce billet de blog l'explique à fond: les principes de la technologie de pagination et la signification et les méthodes de pagination (i)
2. Part de la page JSP , se connectez ici directement à la base de données SQLServer2005 avec JDBC dans la page JSP pour interroger les données (dans l'implémentation réelle, il n'est pas recommandé d'encapsuler la logique métier complexe dans la page JSP, la page JSP ne devrait être pas responsable de l'affichage;
Le code est le suivant:
<% @ page import = "PaginationExample. *"%> <% @ page import = "java.util. *"%> <% @ page import = "java.sql. *"%> <% @ page linguisse = "java" contentType = "text / html; charset = utf-8" pageCoding = "utf-8"%> <%! Private static final int pagesize = 20; // Définissez le nombre d'enregistrements affichés par page (actuellement 20 enregistrements affichés par page)%> <% request.SetcharAtterencoding ("UTF-8"); // Définissez le contenu soumis par le client sur le servlet sous le nom de UTF-8 Encoding Response.SetcharAtterencoding ("UTF-8"); // Définissez le contenu renvoyé au servlet au client sous le nom d'UTF-8 Encoding Response.SetContentType ("Text / Html; charSet = UTF-8"); // informer le navigateur pour analyser le contenu dans la chaîne de format UTF-8 pagenostr = request.getParameter ("pagenostr"); // Recevez le nombre de pages à afficher par le client int pageno = 1; // le nombre de pages à afficher int totalpages = 1; // Nombre total de pages // Vérifiez et définissez Pageno if (pagenostr! = Null &&! Pagenostr.equals ("")) {try {pageno = Integer.Parseint (pagenostr); if (pageno <1) {// Si Pageno est inférieur à 1, la première page s'affiche par défaut Pageno = 1; }} catch (NumberFormatexception e) {// Lorsque le pageno obtenu (nombre actuel de pages) est illégal, la première page est affichée par défaut Pageno = 1; }} else {// D'autres cas où Pageno n'a pas été récupéré sont affichés par défaut Pageno = 1; } / * =====================================================================. =====================================================================. * / / * Obtenez le nombre total de pages dans la base de données une fois les enregistrements qui sont pagis par le nombre spécifié (pagesize) * / connexion totalConn = null; Déclaration totalstmt = null; ResultSet totalrs = null; essayez {totalConn = dbutil.getConnection (); // Générer la chaîne d'instruction SQL SqlGetTotalPages = "SELECT COUNT (*) FROM ALLDATA"; // obtient le nombre total d'enregistrements totalstmt = totalConn.CreateStatement (); TotalRS = Totalstmt.ExecuteQuery (SqlGetTotalPages); totalrs.next (); int Countresult = Totalrs.getInt (1); // Obtenez le nombre total de pages Total Pages = Countrésult% PageSize == 0? Couptreult / PageSize: (INT) (Countrésult / PageSize) + 1; } catch (sqlexception e) {System.out.println ("Une erreur s'est produite dans History Query, l'opération n'a pas été terminée!"); e.printStackTrace (); } enfin {dbutil.close (totalrs); Dbutil.close (totalstmt); Dbutil.close (totalConn); } / * Si le nombre de pages est supérieur au nombre total de pages, la dernière page est affichée par défaut * / if (pageno> totalPages) {pageno = totalPages; } / * Affichez les enregistrements d'observation dans la page actuelle de la base de données et utilisez une liste pour stocker les enregistrements * / list <cord> disques = new ArrayList <Scold> (); Connexion conn = null; Préparé Pstmt = null; ResultSet rs = null; int startIndex = (pageno - 1) * pagesize + 1; int endIndex = pageno * pagesize; essayez {conn = dbutil.getConnection (); String sql = "SELECT * FROM (SELECT ROW_NUMBER () AUT (ORDER par DATA_TAIZHAN_NUM, DATA_DATE ASC) AS 'NUM', * From AllData) comme temp où num entre" + startIndex + "et" + endIndex; PSTMT = Conn.Preparestatement (SQL); rs = pstmt.ExecuteQuery (); while (Rs.Next ()) {// supprime les données de chaque enregistrement et les résumer dans un enregistrement d'objet enregistré 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); // Mettez l'objet d'enregistrement encapsulé dans le conteneur de liste}} catch (sqlexception e) {System.out.println ("Erreur de requête, opération non terminée!"); e.printStackTrace (); } enfin {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 "> <head> <méta http-equiv =" Contenu-Type "Content =" Texl / htl; charset = utf-8 "> <meta http-equiv =" x-ua-compatible "contenu =" ie = edge "> <% - exécutez le dernier mode de rendu dans ie -%> <méta-name =" Viewport "contenu =" width = device-width, initial-scale = 1 "> <% - Initialize Mobile Browsing affiche -%> <méta nom =" Author "contenu ="> " rel = "Stylesheet" href = "css / bootstrap.css"> <link rel = "Stylesheet" href = "css / enregistresearchresult.css"> <script type = "text / javascrip src = "js / bootstrap.min.js"> </ script> <script type = "text / javascript" src = "js / bootstrap-paginator.min.js"> </ script> <itle> - Enregistrement de recherche - </ title> </ head> <body> <div> <v> <! - Afficher les enregistrements de données -> <form records.size () == 0) {out.println ("<tr> <td> <h4> <strong> Aucun enregistrement qui répond aux exigences, pourquoi ne pas essayer de modifier les critères de recherche ~ </strong> </h4> </td> </tr>"); } else {%> <tr> <td> <h4> <strong> Station d'observation </strong> </h4> </td> <% enregistre R = Records.get (0); if (r.getTtem ()! = null) {out.println ("<td> <h4> <strong> température (℃) </strong> </h4> </td>"); } if (r.gethum ()! = null) {out.println ("<td> <h4> <strong> humidité (%) </strong> </h4> </td>"); } if (r.getpa ()! = null) {out.println ("<td> <h4> <strong> pression (hpa) </strong> </h4> </td>"); } if (r.getRain ()! = null) {out.println ("<td> <h4> <strong> Rouvade (mm) </strong> </h4> </td>"); } if (r.getwin_dir ()! = null) {out.println ("<td> <h4> <strong> Direction du vent (°) </strong> </h4> </td>"); } if (r.getwin_sp ()! = null) {out.println ("<td> <h4> <strong> vitesse du vent (m / s) </strong> </h4> </td>"); }%> <td> <h4> <strong> temps d'observation </strong> </h4> </td> </tr> <%} %> <% if (disques! = null && enregistre.size ()! = 0) {pour (enregistrer r: record) {%> <tr> <td> <% = r.gettaizhan_num () %> 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 Afficher div -> <div align = "Center"> <ul id = "paginator"> </ul> </ div> </ form> <%}%> </v> </v> <script type = ' BootstrapMaJorVersion: 3, // Bootstrap Version Taille: 'normal', itemTexts: fonction (type, page, courant) {switch (type) {case "First": return "home"; case "Prev": return "<i class = 'fa fa-caret-left'> </i> page précédente"; case "next": return "page suivante <i class = 'fa fa-caret-droite'> </i>"; cas "Last": return "Last Page"; Case "page": page de retour; }}, ToolTipTitles: fonction (type, page, courant) {switch (type) {case "First": return "homepage"; Cas "PREV": RETOUR "Page précédente"; case "Next": return "Page suivante"; cas "Last": return "Last Page"; case "page": return "thread" + page + "page"; }}, PageUrl: fonction (type, page, courant) {return "showInfosearchResult.jsp? pagenostr =" + page; // Passez à la page sélectionnée}, NumberOfPages: 6, // Nombre d'options à afficher "Quelle page" est actuellement la page: <% = pageno%>, // pages actuelles TotalPages: <% = TotalPages%> // Pages totaux} $ ('# paginator'). Bootstrappaginator (options); </cript> </ body> </html>3. Concernant l'enregistrement et les classes DButil utilisées dans cet exemple:
La classe d'enregistrement est une classe Java ordinaire qui résume les données et fournit uniquement des méthodes GET / SET. Ses propriétés correspondent aux champs contenus dans le tableau de la base de données un par un. Le code est le suivant:
Package PaginationExample; Importer Java.Sql. *; / ** * Informations sur les données météorologiques d'incapsule * @Author Zhong * * / Public Class Record {private String Taizhan_num; // Nom de la station String privé TEM; // Température à cordes privées Hum; // Humidité Private String PA; // Pression privée de chaîne privée; // Plume Private String win_dir; // Wind Direction Private String win_sp; // Date d'horodatage privé de vitesse du vent; // Date d'observation (format d'origine) / ** * Obtenez le nom de la station qui a généré l'enregistrement d'observation; * @return Nom de la station * / chaîne publique gettaizhan_num () {return taizhan_num; } / ** * Définissez le nom de la station qui produit l'enregistrement d'observation; * @param taizhan_num Le nom de la station à définir * / public void Settaizhan_num (String taizhan_num) {this.taizhan_num = taizhan_num; } / ** * Obtenez la température; * @Return Température Valeur * / Public String gettem () {return TEM; } / ** * Réglez la température; * @param tem La valeur de température à définir * / public void setm (String TEM) {this.tem = TEM; } / ** * Obtenez de l'humidité; * @return Humidity Value * / public String gethum () {return bum; } / ** * Définir l'humidité; * @param humum à définir * / public void sethum (String bum) {this.hum = hum; } / ** * Obtenez une pression; * @Return Pression Valeur * / public String getPA () {return pa; } / ** * régler la pression; * @param pa à définir * / public void setPa (String pa) {this.pa = pa; } / ** * obtenir des précipitations; * @return Valeur de précipitations * / public String getrain () {return rain; } / ** * Définir les précipitations; * @param pluie à régler la valeur de la pluie * / public void setrain (String Rain) {this.rain = rain; } / ** * Obtenez la direction du vent; * @return Wind Direction Value * / public String getwin_dir () {return win_dir; } / ** * régler la direction du vent; * @param win_dir à définir la valeur de direction du vent * / public void setwin_dir (string win_dir) {this.win_dir = win_dir; } / ** * Obtenez la vitesse du vent; * @return Valeur de vitesse du vent * / chaîne publique getwin_sp () {return win_sp; } / ** * Définissez la direction du vent; * @param win_sp La valeur de direction du vent à définir * / public void setwin_sp (string win_sp) {this.win_sp = win_sp; } / ** * Obtenez la date d'observation; * @return Date d'observation * / Timestamp public getDate () {date de retour; } / ** * définir la date d'observation; * @param Date d'observation Date Valeur * / public void setDate (date d'horodatage) {this.date = date; }}Capture d'écran du tableau AllData correspondant:
La classe DBUtil est une classe d'outils de base de données qui fournit des connexions, des instructions, etc. liées à la base de données avec le code suivant:
Package PaginationExample; import java.sql. *; import org.apache.tomcat.jdbc.pool.datasource; import org.apache.tomcat.jdbc.pool.poolproperties; / ** * Classe d'outils de données (Classe publique Tomcat JDBC) * @Autor Zhong * * DS; Static {// Configurer Tomcat JDBC Pool (Connection Pool) PoolProperties p = new PoolProperties (); P.SetUrl ("JDBC: SqlServer: // LocalHost: 1433; Databasename = Weather"); // Définissez l'URL connectée P.SetDriverClassName ("com.microsoft.sqlserver.jdbc.sqlServerDriver"); // Chargez le pilote de base de données p.SetUserName ("SA"); // Nom d'utilisateur pour la connexion distante p.SetPassword ("2003NiANDEDIYICHangxue"); // mot de passe p.setjmxenabled (true); P.SetTest WhileIdle (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); } privé dButil () {} / ** * Obtenez une connexion de base de données (connexion); * @Return Database Connection * / Connexion statique publique getConnection () {connexion conn = null; essayez {conn = ds.getConnection (); } catch (sqlexception e) {e.printStackTrace (); } return conn; } / ** * Fermez la connexion entrante; * @Param Conn Connection à fermer * / public static void close (connexion Conn) {try {if (conn! = null) {Conn.close (); Conn = null; }} catch (sqlexception e) {e.printStackTrace (); }} / ** * Fermez l'instruction entrante; * @param stmt instruction à fermer * / public static void close (instruction stmt) {try {if (stmt! = null) {stmt.close (); stmt = null; }} catch (sqlexception e) {e.printStackTrace (); }} / ** * Fermez le résultat entrant; * @param rs ResultSet à fermer * / public static void close (resultSet rs) {try {if (rs! = null) {Rs.close (); rs = null; }} catch (sqlexception e) {e.printStackTrace (); }}}4. Note supplémentaire:
①: Lorsque SQLServer implémente la pagination, il est nécessaire d'utiliser la fonction ROW_NUMBER () pour générer une colonne qui enregistre le numéro de ligne séparément, afin de faciliter la pagination ultérieure de l'intervalle de numéro de ligne correspondant. exemple:
J'ai vu qu'il y avait une colonne devant laquelle avait un numéro de ligne nommé Num avec le nom de champ du numéro de ligne;
(Si l'ID de clé principale du tableau est un nombre automatiquement incrémenté, vous pouvez également utiliser l'ID pour récupérer l'enregistrement dans les segments, mais la prémisse est que l'ID doit être incrémenté en continu et automatiquement)
Pour plus d'informations sur la mise en œuvre de la pagination par Row_number (), veuillez vous référer à: Méthode d'implémentation de SQL Server d'utilisation de la pagination ROW_NUMBER
②: La pagination MySQL est beaucoup plus simple à implémenter, utilisez simplement le mot-clé limite. exemple:
Sélectionnez * From Table1 Order by Id ASC limit 3, 2 signifie qu'après tri les données dans la valeur du tableau 1 par ID (commande ASC), à partir de la troisième ligne, prenez les deux lignes suivantes des enregistrements (c'est-à-dire les enregistrements de quatrième et cinquième rangée)
③: Pour l'utilisation spécifique de Bootstrap-Paginator, vous pouvez vous référer au document officiel (situé dans le dossier Document après décompression). Le document officiel est très bien écrit et simple et facile à comprendre.
Lorsque vous utilisez la version Bootstrap V3, vous devez utiliser la balise <ul> pour afficher Bootstrap-Paginator et indiquer la version de Bootstrap utilisé dans l'élément de configuration (voir mon exemple de page JSP Exemple de page).
(La version bootstrap v2 peut être utilisée directement à l'aide de la balise <v> dans le document de l'exemple)
④: Formules couramment utilisées pour la pagination: Supposons que le nombre de pages à afficher est N, et que des éléments de données sont affichés sur chaque page, puis la position de départ (c'est-à-dire le startIndex dans l'exemple JSP) des données à récupérer est: (N-1) * M + 1, et la position finale (endindex) est: n * M
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.