Primeiro, vamos apresentar um paginador simples e elegante: Bootstrap-Paginator. Você pode se referir a: Bootstrap Paginator. Explicação detalhada do uso do plug -in Paginator Paging. Este artigo é usado para aprender.
Screenshot de efeito:
Endereço oficial para download do Github: https://github.com/lyonlai/bootstrap-paginator
Vamos introduzir o processo de implementação da exibição de paginação JSP com base nessa ferramenta de paginação em detalhes (Nota: Comparado com a página da web original, eu escondi muito conteúdo desnecessário, e este exemplo se concentra apenas na implementação da exibição de paginação)
1. Por que você precisa exibir paginação?
Esta postagem do blog explica completamente: os princípios da tecnologia de paginação e o significado e os métodos de paginação (i)
2. Página JSP Parte , aqui conecte -se diretamente ao banco de dados SQLSERVER2005 com JDBC na página JSP para consultar dados (na implementação real, não é recomendável encapsular a lógica de negócios complexa na página JSP, a página JSP deve ser responsável pela exibição;
O código é o seguinte:
<%@ página import = "paginationExample.*"%> <%@ página import = "Java.util. private estático final int PAGESize = 20; // Defina o número de registros exibidos por página (atualmente 20 registros exibidos por página)%> <% request.Setcharacterencoding ("UTF-8"); // Defina o conteúdo enviado pelo cliente para o servlet como UTF-8 Coding Response.Setcharacterencoding ("UTF-8"); // Defina o conteúdo enviado de volta ao servlet para o cliente como UTF-8 Coding Response.SetContentType ("Text/html; charset = utf-8"); // Informe o navegador para analisar o conteúdo no formato UTF-8 string pagenoStr = request.getParameter ("Pagenostr"); // recebe o número de páginas a serem exibidas pelo cliente int pageno = 1; // o número de páginas a serem exibidas int totalpages = 1; // Número total de páginas // Verifique e defina Pageno if (pagenostr! = Null &&! Pagenostr.equals ("" ")) {tente {pageno = Integer.parseint (pagenostr); if (pageno <1) {// se pageno for menor que 1, a primeira página é exibida por padrão pageno = 1; }} catch (númeroFormatexception e) {// Quando o pageno obtido (número atual de páginas) é ilegal, a primeira página é exibida por padrão pageno = 1; }} else {// Outros casos em que Pageno não foi recuperado são exibidos por padrão pageno = 1; } /* ============================================================== ============================================================== *//*Obtenha o número total de páginas no banco de dados depois que os registros forem paginados pelo número especificado (Pagesize)*/ conexão totalConn = null; Declaração totalstmt = null; ResultSet totalrs = NULL; tente {totalConn = dbutil.getConnection (); // Gere SQL String String sqlgetTotalPages = "Selecione count (*) de AllData"; // Obtenha o número total de registros totalstmt = totalConn.Createstatement (); totalrs = totalstmt.executeQuery (sqlgetTotalPages); totalrs.Next (); Int Counsult = totalrs.getInt (1); // Obtenha o número total de páginas TotalPages = Countsult % Pagesize == 0? Countsult / PagageSize: (int) (Countsult / PagageSize) + 1; } catch (sqLexception e) {System.out.println ("Ocorreu um erro na consulta da história, a operação não foi concluída!"); E.PrintStackTrace (); } finalmente {dbutil.close (totalrs); Dbutil.close (totalstmt); Dbutil.close (totalConn); } /* Se o número de páginas for maior que o número total de páginas, a última página será exibida por padrão* / if (pageno> totalPages) {pageno = totalpages; } /* Obtenha os registros de observação a serem exibidos na página atual no banco de dados e use uma lista para armazenar os registros* / list <decord> registros = new ArrayList <deck> (); Conexão conn = null; Preparado PSTMT de estatuto preparado = null; ResultSet rs = null; int startIndex = (Pageno - 1) * PageSize + 1; int endindex = pageno * PageSize; tente {conn = dbutil.getConnection (); String sql = "Selecione * de (selecione row_number () sobre (ordem por data_taizhan_num, data_date ASC) como 'num', * de alldata) como temp onde num entre" + startIndex + "e" + endindex; Pstmt = Conn.Preparestatement (SQL); rs = pstmt.executeQuery (); while (rs.Next ()) {// retira os dados de cada registro e o encapsulam em um registro de registro Record 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.setRrain (rs.getString (7)); r.setwin_dir (rs.getString (8)); r.setwin_sp (rs.getString (9)); registros.add (r); // Coloque o objeto de registro encapsulado no contêiner da lista}} Catch (SQLEXCIPCECTION E) {System.out.println ("Erro de consulta, operação não concluída!"); 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset = utf-8 "> <meta http-equiv =" x-ua compatível com "content =" ie = edge "> <%-execute o modo de renderização mais recente no ie-%> <meta name =" viewport "contenting =" width = width, link inicial = 1 "> <%-inicialize" teor Rel = "Stylesheet" href = "css/bootstrap.css"> <link rel = "Stylesheet" href = "css/registrosearchResult.css"> <script type = "text/javascript" src = "js/jQuery-1.12.3.js"> </script "</slitt" </slitt) src = "js/bootstrap.min.js"> </script> <script type = "text/javascript" src = "js/bootstrap-paginator.min.js"> </script> <title>-Pesquise Record-</title> </head> <body> <div> <! ||. } else { %> <tr> <td> <h4> <strong> Estação de observação </strong> </h4> </td> < % registra r = registra.get (0); if (r.getTem ()! = null) {out.println ("<td> <h4> <strong> temperatura (℃) </strong> </h4> </td>"); } if (r.gethum ()! = null) {out.println ("<td> <h4> <strong> umidade (%) </strong> </h4> </td>"); } if (r.getpa ()! = null) {out.println ("<td> <h4> <strong> pressão (hpa) </strong> </h4> </td>"); } if (r.getRain ()! = null) {out.println ("<td> <h4> <strong> chuva (mm) </strong> </h4> </td>"); } if (r.getwin_dir ()! = null) {out.println ("<td> <h4> <strong> direção do vento (°) </strong> </h4> </td>"); } if (r.getwin_sp ()! = null) {out.println ("<td> <h4> <strong> velocidade do vento (m/s) </strong> </h4> </td>"); } %> <td> <h4> <strong> Tempo de observação </strong> </h4> </td> </tr> < %} %> < %se (registros! {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> < %} %> </tabela> <!-Exibição de paginação div-> <div align = "Center"> <l id = "paginator"> </ul> </div> </forma <form> <%rs> </div> </script "> </ul> </liv> </forma> < %} %> bootstrapmajorverSion: 3, // Tamanho da versão do bootstrap: 'Normal', ItemTexts: function (type, página, atual) {switch (type) {case "primeiro": retornar "home"; case "prev": retornar "<i class = 'fa fa-caret-left'> </i> página anterior"; Caso "Próximo": Retorno "Próxima página <i class = 'fa fa-caret-right'> </i>"; caso "último": retornar "última página"; case "página": página de retorno; }}, ToolTiptitles: function (type, página, atual) {switch (type) {case "primeiro": return "homepage"; caso "prev": retornar "página anterior"; caso "próximo": retornar "próxima página"; caso "último": retornar "última página"; case "página": retornar "thread" + página + "página"; }}, Pageurl: function (tipo, página, atual) {return "showInfosearchResult.jsp? Pagenostr ="+Page; // Pule para a página selecionada}, NumberOfPages: 6, // Número de opções a serem exibidas "Qual página" é atualmente Página: < %= pageno %>, // Páginas atuais TotalPages: < %= totalPages %> // Páginas totais} $ ('#paginator'). BootstrapGinator (opções); </script> </body> </html>3. Em relação às classes de registro e dbutil usadas neste exemplo:
A classe de registro é uma classe Java comum que encapsula dados e fornece apenas métodos GET/Set. Suas propriedades correspondem aos campos contidos na tabela um do banco de dados um por um. O código é o seguinte:
PAGINA PAGINAEXAMPLE; importar java.sql. // Nome da estação TEM de sequência privada; // temperatura de corda privada humor; // umidade privada string pa; // Pressão chuva privada de corda; // chuva private string win_dir; // Direção do vento Private String win_sp; // Data de timestamp privada da velocidade do vento; // Data de observação (formato original) /*** Obtenha o nome da estação que gerou o registro de observação; * Nome da estação @return*/ public string gettaizhan_num () {return taizhan_num; } /*** Defina o nome da estação que produz o registro de observação; * @param taizhan_num o nome da estação a ser definido*/ public void Settaizhan_num (String taizhan_num) {this.taizizhan_num = taizhan_num; } /*** Obtenha a temperatura; * Valor de temperatura @return*/ public string getTem () {return Tem; } /*** Defina a temperatura; * @param TEM O valor da temperatura a ser definido*/ public void Settem (String tem) {this.tem = tem; } /*** Obtenha umidade; * @return umidade Valor*/ public string gethum () {return Hum; } /*** Defina a umidade; * @param hum hum para ser definido*/ public void sethum (string hum) {this.hum = hum; } /*** Obtenha pressão; * @return Pressão Valor*/ public String getpa () {return pa; } /*** Defina pressão; * @param pa para ser definido*/ public void setpa (string pa) {this.pa = pa; } /*** Obtenha chuva; * @return chuva Valor */ public string getRain () {return chuva; } /*** defina chuvas; * @param chuva a ser definida Valor da chuva */ public void setrain (chuva de cordas) {this.rain = chuva; } /*** Obtenha direção do vento; * @return Wind Direction Value */ public string getwin_dir () {return win_dir; } /*** Defina a direção do vento; * @param win_dir a ser definido Valor da direção do vento */ public void setwin_dir (string win_dir) {this.win_dir = win_dir; } /*** Obtenha velocidade do vento; * @return Wind Speed Value */ public string getwin_sp () {return win_sp; } /*** Defina a direção do vento; * @param win_sp o valor da direção do vento a ser definido*/ public void setwin_sp (string win_sp) {this.win_sp = win_sp; } /*** Obtenha a data de observação; * Data de observação @return*/ timestamp público getDate () {Data de retorno; } /*** Defina a data de observação; * @param data de observação Data Valor*/ public void SetDate (data de timestamp) {this.date = date; }}Captura de tela da tabela AllData correspondente:
A classe Dbutil é uma classe de ferramenta de banco de dados que fornece conexões, declarações, etc. relacionadas ao banco de dados, com o seguinte código:
PAGINA PACINAEXAMPLE; importar java.sql. ds; estático {// Configure o pool tomcat jdbc (pool de conexões) PoolProperties p = newProperties (); p.seturl ("JDBC: SQLSERVER: // localhost: 1433; DatabaseName = Weather"); // Defina o URL conectado P.SetDriverClassName ("com.microsoft.sqlserver.jdbc.sqlserverdriver"); // carrega o driver de banco de dados P.setUserName ("SA"); // nome de usuário para conexão remota p.setpassword ("2003niandiyichangxue"); // senha p.setjmxenabled (true); p.setTestwhileidle (falso); p.setTestonBorrow (true); P.SetValidationQuery ("Selecione 1"); p.setTestOnReturn (false); p.setValidationInterval (30000); p.setTimeBetweenEvictionRunsmillis (30000); p.setMaxactive (100); p.setinitialSize (10); p.setMaxWait (10000); p.setRemoveabandEnedTimeout (60); p.setMineVictableIdletimemillis (30000); p.setminidle (10); p.setLogabandono (verdadeiro); p.setRemoveabandon (true); p.setjdbcinterceptores ("org.apache.tomcat.jdbc.pool.intercept.connectionState;"+ "org.apache.tomcat.jdbc.pool.intercept.statementfinizer"); ds = new DataSource (); ds.setPoolProperties (P); } private dbutil () {} /*** Obtenha uma conexão de banco de dados (conexão); * Conexão de banco de dados @return */ conexão estática pública getConnection () {conexão conn = null; tente {conn = ds.getConnection (); } catch (sqLexception e) {e.printStackTrace (); } retornar Conn; } /*** Feche a conexão recebida; * @param Connect de conexão a ser fechada */ public static void Close (conexão conn) {try {if (conn! = null) {Conn.Close (); Conn = null; }} catch (sqLexception e) {e.printStackTrace (); }} /*** Feche a instrução recebida; * Declaração @param stmt a ser fechada */ public static void close (instrução stmt) {try {if (stmt! = null) {stmt.close (); stmt = nulo; }} catch (sqLexception e) {e.printStackTrace (); }} /*** Feche o conjunto de resultados recebidos; * @param rs ResultSet para ser fechado */ public static void fechado (ResultSet rs) {try {if (rs! = null) {rs.close (); rs = nulo; }} catch (sqLexception e) {e.printStackTrace (); }}}4. Nota suplementar:
①: Quando o SQLServer implementa a paginação, é necessário usar a função row_number () para gerar uma coluna que registra o número da linha separadamente, de modo a facilitar a paginação subsequente do intervalo do número da linha correspondente. exemplo:
Vi que havia uma coluna na frente da qual tinha um número de linha chamado num com o nome de campo do número da linha;
(Se o ID da chave primária na tabela for um número incrementado automaticamente, você também poderá usar o ID para recuperar o registro nos segmentos, mas a premissa é que o ID deve ser contínuo e automaticamente incrementado)
Para obter mais informações sobre a implementação da Paging by Row_Number (), consulte: Método de implementação do SQL Server de usar o Row_Number Paging
②: A paginação MySQL é muito mais simples de implementar, basta usar a palavra -chave limitada. exemplo:
Selecione * da Tabela1 Ordem por ID ASC Limit 3, 2 significa que, após classificar os dados na Tabela1 pelo valor de identificação (ordem ASC), a partir da terceira linha, pegue as próximas duas linhas de registros (ou seja, a quarta e a quinta fila registros)
③: Para o uso específico do Bootstrap-Paginator, você pode consultar o documento oficial (localizado na pasta de documentos após a descompressão). O documento oficial é muito bem escrito, simples e fácil de entender.
Ao usar a versão Bootstrap V3, você deve usar a tag <ul> para exibir o Bootstrap-Paginator e indicar a versão do bootstrap usada no item de configuração (consulte meu método de redação de página JSP).
(A versão do Bootstrap V2 pode ser usada diretamente usando a tag <div> no documento de amostra)
④: Fórmulas comumente usadas para a paginação: suponha que o número de páginas a serem exibidas seja n, e os dados são exibidos em cada página, então a posição inicial (ou seja, o StartIndex no exemplo JSP dos dados a serem recuperados é: (n-1)*M+1 e a posição final (endindex) é: N*M
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.