Primero, introduzcamos un paginador simple y ordenado: Bootstrap-Paginator. Puede consultar: Bootstrap Paginator. Explicación detallada del uso del complemento Paginator Paging. Este artículo se usa para el aprendizaje.
Captura de pantalla del efecto:
Dirección de descarga oficial de GitHub: https://github.com/lyonlai/bootstrap-paginator
Presentemos el proceso de implementación de la pantalla de paginación JSP basada en esta herramienta de paginación en detalle (nota: en comparación con la página web original, he ocultado mucho contenido innecesario, y este ejemplo solo se centra en la implementación de la pantalla de paginación)
1. ¿Por qué necesitas mostrar la paginación?
Esta publicación de blog lo explica a fondo: los principios de la tecnología de paginación y la importancia y los métodos de la paginación (i)
2. Parte de la página JSP , aquí se conecte directamente a la base de datos SQLServer2005 con JDBC en la página JSP para consultar los datos (en la implementación real, no se recomienda encapsular la lógica comercial compleja en la página JSP, la página JSP solo debe ser responsable de la visualización; la respuesta al cliente, las llamadas de lógica comercial y el reenvío de resultados se deben completar mediante el servicio))
El código es el siguiente:
<%@ page import = "PaginationExample.*"%> <%@ page import = "java.util.*"%> <%@ page import = "java.sql.*"%> <%@ page lenguaje = "java" contentTypee = "text/html; charset = utf-8" pageDing = "utf-8"%> <%! Private static final int pageSize = 20; // Establecer el número de registros que se muestran por página (actualmente 20 registros mostrados por página)%> <% request.setcharacterEncoding ("UTF-8"); // Establezca el contenido enviado por el cliente al servlet como respuesta de codificación UTF-8. // Establezca el contenido enviado de nuevo al servlet al cliente como respuesta de codificación UTF-8.setContentType ("Text/html; charset = utf-8"); // Informe al navegador para analizar el contenido en la cadena de formato UTF-8 Pagenostr = request.getParameter ("Pagenostr"); // recibir el número de páginas que el cliente int Pageno = 1; // El número de páginas que se mostrarán int TotalPages = 1; // Número total de páginas // verificar y establecer pageno if (pagenostr! = Null &&! Pagenostr.equals ("")) {try {pageno = integer.parseInt (pagenostr); if (pageno <1) {// Si pageno es inferior a 1, la primera página se muestra por defecto pageno = 1; }} Catch (NumberFormateException e) {// Cuando el pageno obtenido (número actual de páginas) es ilegal, la primera página se muestra por defecto pageno = 1; }} else {// Otros casos en los que Pageno no se ha recuperado se muestran por defecto pageno = 1; } /* ============================================================== ============================================================== *//*Obtenga el número total de páginas en la base de datos después de que los registros estén pagados por el número especificado (PageSize)*/ Connection TotalConn = null; Instrucción TotalStmt = NULL; ResultSet totalRS = nulo; intente {totalConn = dButil.getConnection (); // Generar cadena de instrucción SQL sqlgetToTalPages = "select Count (*) desde Alldata"; // Obtener el número total de registros TotalStmt = TotalConn.CreateStatement (); TotalRS = TotalStmt.ExecuteQuery (sqlgettotalpages); Totalrs.next (); int countresult = totalrs.getInt (1); // Obtener el número total de páginas TotalPages = Countresult % PageSize == 0? Countresult / PageSize: (int) (Countresult / PageSize) + 1; } Catch (Sqlexception e) {System.out.println ("Un error ocurrió en la consulta de la historia, ¡la operación no se completó!"); E.PrintStackTrace (); } Finalmente {dButil.Close (TotalRS); DButil.Close (TotalStmt); DButil.Close (TotalConn); } /* Si el número de páginas es mayor que el número total de páginas, la última página se muestra por defecto* / if (pageno> totalPages) {pageno = totalPages; } /* Obtenga los registros de observación que se muestren en la página actual en la base de datos, y use una lista para almacenar los registros* / list <22 Record> registros = new ArrayList <COCORD> (); Conexión conn = nulo; Preparado PSTMT = NULL; ResultSet rs = null; int startIndex = (Pageno - 1) * PageSize + 1; int intente {conn = dButil.getConnection (); String sql = "select * de (seleccione row_number () over (orden por data_taizhan_num, data_date asc) como 'num', * de Alldata) como temperno donde num entre" + startIndex + "y" + endindex; pstmt = conn.preparestatement (sql); rs = pstmt.executeQuery (); while (rs.next ()) {// Saque los datos de cada registro y lo encapsula en un objeto de registro registro 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)); registro.Add (r); // Ponga el objeto de registro encapsulado en el contenedor de lista}} Catch (Sqlexception e) {System.out.println ("Error de consulta, operación no completada!"); E.PrintStackTrace (); } finalmente {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 "> <bead> <meta http-egum =" content-type "content"/"text/htmll; charset = utf-8 "> <meta http-equiv =" x-ua-compatible "content =" ie = borde "> <%-ejecute el último modo de representación en IE-%> <meta name =" viewport "content =" width = dispositivo-width, inicial-escale = 1 "> <%-Inicializar la pantalla móvil de aves rel = "stylesheet" href = "css/bootstrap.css"> <link rel = "stylesheet" href = "css/registrosearchResult.css"> <script type = "text/javaScript" src = "js/jquery-1.12.3.min.js"> </script> <scripty tipo = "text/javaScript" src = "js/bootstrap.min.js"> </script> <script type = "text/javascript" src = "js/bootstrap-paginator.min.min.js"> </script> <title>-búsqueda de registro-</title> <bead> <body> <div> <div> <!-Mostrar registros de datos utilizando formularios-> <form> <% if (% if (registros (registros /= Records.size () == 0) {out.println ("<tr> <td> <h4> <strong> No hay registros que cumplan con los requisitos, ¿por qué no intentar cambiar los criterios de búsqueda ~ </strong> </h4> </td> </tr>"); } else { %> <tr> <td> <h4> <strong> Estación de observación </strong> </h4> </td> < % registro r = Records.get (0); if (r.gettem ()! = null) {out.println ("<td> <h4> <strong> temperatura (℃) </strong> </h4> </td>"); } if (r.gethum ()! = null) {out.println ("<td> <h4> <strong> humedad (%) </strong> </h4> </td>"); } if (r.getpa ()! = null) {out.println ("<td> <h4> <strong> presión (hpa) </strong> </h4> </td>"); } if (r.getrain ()! = null) {out.println ("<td> <h4> <strong> lluvia (mm) </strong> </h4> </td>"); } if (r.getwin_dir ()! = null) {out.println ("<td> <h4> <strong> viento dirección (°) </strong> </h4> </td>"); } if (r.getwin_sp ()! = null) {out.println ("<td> <h4> <strong> vía de viento (m/s) </strong> </h4> </td>"); } %> <td> <h4> <strong> tiempo de observación </strong> </h4> </td> </tr> < %} %> < %if (registros! = nulo && récords.size ()! = 0) {for (registro r: registros) { %> <tr> <tr> <td> < %= r.gettaizhan_num () %> </td> < %if (R. R.) 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-> <div Div Align = "Center"> <ul Id = "Paginator"> </ul> </form> </ %} %> </div> </div> <scryt type = 'text/javaScript' ' BootstraPMaJorversion: 3, // tamaño de versión de bootstrap: 'normal', itemTexts: function (type, página, actual) {switch (type) {case "primero": return "home"; Caso "anterior": return "<i class = 'fa fa-caret-left'> </i> página anterior"; Caso "Next": return "página siguiente <i class = 'fa fa-caret-right'> </i>"; caso "Último": devolver "Última página"; Caso "página": página de retorno; }}, ToolTiptitles: function (type, página, actual) {switch (type) {case "primero": return "HomePage"; Caso "anterior": retorno "página anterior"; Caso "Siguiente": Return "Página siguiente"; caso "Último": devolver "Última página"; caso "página": return "hilo" + página + "página"; }}, pageUrl: function (type, página, actual) {return "showInfosearchResult.jsp? Pagenostr ="+página; // omita a la página seleccionada}, número de páginas: 6, // número de opciones para mostrar "qué página" es actualmente la página: < %= pageno %>, // páginas actuales totalespages: < %= totalpages %> // páginas totales} $ ('#paginator'). BootStrapPaginator (opciones); </script> </body> </html>3. Con respecto al registro y las clases dButil utilizadas en este ejemplo:
La clase de registro es una clase Java ordinaria que encapsula los datos y solo proporciona métodos GET/SET. Sus propiedades corresponden a los campos contenidos en la tabla de la base de datos uno por uno. El código es el siguiente:
paquete paginationExample; import java.sql.*;/*** Encapsular información de datos meteorológicos* @author zhong**/public class Record {private String taizhan_num; // Nombre de la estación Cadena privada TEM; // temperatura de cadena privada Hum; // Humedad cadena privada PA; // Presión de lluvia privada de cuerda; // Stripe Private String win_dir; // Dirección de viento Cadena privada win_sp; // Fecha de marca de tiempo privada de velocidad del viento; // Fecha de observación (formato original) /*** Obtenga el nombre de la estación que generó el registro de observación; * @return name*/ public string gettaizhan_num () {return taizhan_num; } /*** Establezca el nombre de la estación que produce el registro de observación; * @param taizhan_num El nombre de la estación se establecerá*/ public void settaizhan_num (string taizhan_num) {this.taizhan_num = taizhan_num; } /*** Obtener la temperatura; * @Return Valor de temperatura*/ public String getTem () {return tem; } /*** Establezca la temperatura; * @param tem el valor de temperatura que se establecerá*/ public void settem (string tem) {this.tem = tem; } /*** Obtener humedad; * @Return Humity Value*/ public String gethum () {return hum; } /*** establecer humedad; * @param hum hum para ser establecido*/ public void sethum (string hum) {this.hum = hum; } /*** Obtener presión; * @Return Value de presión*/ public String getPa () {return pa; } /*** Establecer presión; * @param PA para ser establecido*/ public void setpa (string pa) {this.pa = pa; } /*** Obtener lluvia; * @Return Rainfall Value */ public String getrain () {return Rain; } /*** establecer lluvia; * @param Rain para establecer el valor de lluvia */ public void setrain (String Rain) {this.rain = lluvia; } /*** Obtener dirección de viento; * @Return Wind Direction Value */ public String getwin_dir () {return win_dir; } /*** establecer la dirección del viento; * @param win_dir para establecer el valor de dirección del viento */ public void setwin_dir (string win_dir) {this.win_dir = win_dir; } /*** Obtener velocidad del viento; * @Return Value de velocidad del viento */ public String getwin_sp () {return win_sp; } /*** Establezca la dirección del viento; * @param win_sp El valor de dirección del viento se establecerá*/ public void setwin_sp (string win_sp) {this.win_sp = win_sp; } /*** Obtenga la fecha de observación; * @Fecha de observación de @return*/ public timestamp getDate () {fecha de retorno; } /*** Establezca la fecha de observación; * @param Fecha de observación Fecha Valor*/ public void setDate (fecha de marca de tiempo) {this.date = date; }}Captura de pantalla de la tabla Alldata correspondiente:
La clase DButil es una clase de herramienta de base de datos que proporciona conexiones, declaraciones, etc. relacionadas con la base de datos, etc. con el siguiente código:
paquete paginationExample; import java.sql. *; importar org.apache.tomcat.jdbc.pool.datasource; importar org.apache.tomcat.jdbc.pool.poolproperties;/** * Class de herramientas de base de datos (usando el grupo de Tomcat JDBC) * @author Zhong * */Public Class Dbutil {private DataUrure Dataure Datasource Dataur. static {// Configurar Tomcat JDBC Pool (Pool de conexión) PoolProperties P = new PoolProperties (); p.setUrl ("JDBC: SQLServer: // localhost: 1433; DataBAsename = Weather"); // Establecer la URL conectada p.setDriverClassName ("com.microsoft.sqlserver.jdbc.sqlserverdriver"); // cargar el controlador de la base de datos p.setUsername ("sa"); // nombre de usuario para conexión remota p.setPassword ("2003niandiDiyichangxue"); // contraseña p.setJMXEnabled (true); P.Settest Whipleidle (falso); P.SettonBorrow (verdadero); p.setValidationQuery ("Seleccionar 1"); P.Settestonreturn (falso); P.SetValidationInterval (30000); P.SetTimeBetweenEvictionRunsmillis (30000); p.setMaxActive (100); P.SetinitialSize (10); P.SetMaxWait (10000); P.SetRemoveAbandonedTimeOut (60); P.SetMinevictableIdletimillis (30000); p.setminidle (10); p.setLogAbandoned (verdadero); p.setremoveabandoned (verdadero); p.setJDBCinterceptors ("org.apache.tomcat.jdbc.pool.interceptor.connectionState;"+ "org.apache.tomcat.jdbc.pool.interceptor.statementFinalizer"); ds = new DataSource (); ds.SetPoolProperties (P); } private dButil () {} /*** Obtenga una conexión de base de datos (conexión); * @return Conexión de la base de datos */ Public static Connection getConnection () {Connection conn = null; intente {conn = ds.getConnection (); } Catch (Sqlexception e) {E.PrintStackTrace (); } return Conn; } /*** Cierre la conexión entrante; * @param Conn conexión para estar cerrado */ public static void Close (Connection Conn) {try {if (conn! = null) {conn.close (); conn = nulo; }} Catch (SQLException e) {E.PrintStackTrace (); }} /*** Cierre la instrucción entrante; * @param stmt la declaración para cerrarse */ public static void Close (Declaración stmt) {try {if (stmt! = null) {stmt.close (); stmt = nulo; }} Catch (SQLException e) {E.PrintStackTrace (); }} /*** Cierre el resultado de resultados entrante; * @param rs resultset para estar cerrado */ public static void Close (resultset rs) {try {if (rs! = null) {rs.close (); rs = nulo; }} Catch (SQLException e) {E.PrintStackTrace (); }}}4. Nota complementaria:
①: Cuando SQLServer implementa la paginación, es necesario usar la función row_number () para generar una columna que registra el número de fila por separado, para facilitar la paginación posterior del intervalo del número de fila correspondiente. ejemplo:
Vi que había una columna frente a la cual tenía un número de fila llamado NUM con el nombre de campo del número de fila;
(Si la ID de clave principal en la tabla es un número incrementado automáticamente, también puede usar la ID para recuperar el registro en segmentos, pero la premisa es que la ID debe incrementarse continua y automáticamente)
Para obtener más información sobre la implementación de la función Paging by Row_Number (), consulte: Método de implementación de SQL Server para usar Paging row_number
②: MySQL Pagination es mucho más simple de implementar, solo use la palabra clave límite. ejemplo:
Seleccione * de la Tabla1 Orden por ID ASC Límite 3, 2 significa que después de ordenar los datos en la Tabla1 por valor de ID (orden de ASC), a partir de la tercera fila, tome las siguientes dos filas de registros (es decir, los registros de cuarta y quinta fila)
③: Para el uso específico de Bootstrap-Paginator, puede consultar el documento oficial (ubicado en la carpeta de documentos después de la descompresión). El documento oficial está muy bien escrito y simple y fácil de entender.
Cuando use la versión Bootstrap V3, debe usar la etiqueta <ul> para mostrar Bootstrap-Paginator e indicar la versión de Bootstrap utilizada en el elemento de configuración (consulte el método de escritura de la página de ejemplo de mi ejemplo JSP).
(La versión Bootstrap V2 se puede usar directamente utilizando la etiqueta <Div> en el documento de muestra)
④: Fórmulas de uso común para la paginación: supongamos que el número de páginas que se muestran es n, y M se muestran los datos en cada página, luego la posición inicial (es decir, el inicio de los datos JSP) de los datos que se recuperan es: (N-1)*M+1, y la posición final (endindex) es: N*M*M
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.