Во-первых, давайте представим простой и аккуратный пагинтор: начальный пагинатор. Вы можете обратиться к: начальному патентору. Подробное объяснение использования плагина Paginator Paging. Эта статья используется для обучения.
Эффект скриншот:
Официальный адрес GitHub Адрес: https://github.com/lyonlai/bootstrap-paginator
Давайте введем процесс реализации DSP Paging Display, основанный на этом инструменте Paging Detail (примечание: по сравнению с исходной веб -страницей я спрятал много ненужного контента, и этот пример фокусируется только на реализации Paging Display)
1. Зачем вам отображать пейджинг?
В этом сообщении подробно это объясняется: принципы технологии пейджинга и значение и методы пейджинга (i)
2. Часть страницы JSP , здесь напрямую подключайтесь к базе данных SQLServer2005 с JDBC на странице JSP, чтобы запросить данные (в реальной реализации не рекомендуется инкапсулировать сложную бизнес -логику на странице JSP, страница JSP должна быть ответственна только за отображение; ответ на клиенту, бизнес -логику и переадресация RESTAD
Код заключается в следующем:
<%@ page import = "paginationExample.*"%> <%@ page import = "java.util.*"%> <%@ page import = "java.sql.*"%> <%@ page language = "java" contentType = "text/html; charset = utf-8" pageending = "utf-8"%> <%! частный статический окончательный pageSize = 20; // Установить количество записей, отображаемых на страницу (в настоящее время 20 записей, отображаемых на страницу)%> <% request.setcharacterencoding ("UTF-8"); // Установить контент, представленный клиентом в сервис как utf-8, ответный отклик. Setcharacterencoding ("UTF-8"); // Установите контент, отправленный обратно в сервлет, клиенту как utf-8 response.setContentType ("text/html; charset = utf-8"); // информировать браузер, чтобы проанализировать контент в utf-8 Format String pagenoStr = request.getParameter ("pagenoStr"); // получение количества страниц, которые будут отображаться клиентом int pageno = 1; // количество страниц, которые будут отображаться, int TotalPages = 1; // общее количество страниц // Проверка и установить pageno if (pagenoStr! = Null &&! PagenoStr.equals ("")) {try {pageno = integer.parseint (pagenoStr); if (pageno <1) {// Если pageno меньше 1, первая страница отображается по умолчанию pageno = 1; }} catch (numberFormateXception e) {// Когда получен Pageno (текущее количество страниц) является незаконным, первая страница отображается по умолчанию pageno = 1; }} else {// другие случаи, когда Pageno не был извлечен, отображаются по умолчанию pageno = 1; } /* ===================================================================== ===================================================================== *//*Получите общее количество страниц в базе данных после того, как записи будут насыщенным указанным номером (Pageize)*/ Connection TotalConn = null; Утверждение TotalStmt = null; ResultSet totalrs = null; try {totalConn = dbutil.getConnection (); // генерировать оператор SQL string sqlgetTotalPages = "select count (*) из alldata"; // Получить общее количество записей TotalStmt = totalConn.createStatement (); TotalRS = totalStmt.ExecUteQuery (sqlgetTotalPages); totalrs.next (); int ounts = totalrs.getint (1); // Получить общее количество страниц Total Pages = Countresult % pagesize == 0? Censult / 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 <cormt> records = new ArrayList <sorcrip> (); Соединение conn = null; Подготовленное Statatement pstmt = null; Результат RS = NULL; int startIndex = (pageno - 1) * pageSize + 1; int endindex = pageno * pagesize; try {conn = dbutil.getConnection (); String sql = "select * from (select row_number () up (order by data_taizhan_num, data_date asc) как 'num', * from alldata) как температура, где num между" + startindex + "и" + endidex; pstmt = conn.prepareStatement (SQL); rs = pstmt.executequery (); while (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 public "-// w3c // dtd html 4.01 transitional // en" "http://www.w3.org/tr/html4/loose.dtd"><html lang =" zh-cn "> <hoad> <meta http-equiv-aecviv =" content-tempe = "headml"; charset = utf-8 "> <meta http-equiv =" x-ua-совместимый "content =" ie = edge "> <%-запустите последний режим рендеринга в IE-%> <Meta name =" Viewport "Content =" Width = WIDTH, начальная масштаба = 1 "> <%-Инициализируя мобильное звено-%> <Meta name =" Author ". rel = "styleSheet" href = "css/bootstrap.css"> <link rel = "stylesheet" href = "css/reworkearchresult.css"> <script type = "text/javascript" src = "js/jquery-12.3.min.js"> </script> <script = jquery-12.3.min.js "> </script> <script>" jquery-12.3.min.js "> </script> <script>". src = "js/bootstrap.min.js"> </script> <script type = "text/javascript" src = "js/bootstrap-paginator.min.js"> </script> <title>-Запись поиска-</title> </head> <body> <div> <div> <!-Отображение записей данных. records.size () == 0) {out.println ("<tr> <td> <h4> <strong> нет записей, которые соответствуют требованиям, почему бы не попытаться изменить критерии поиска ~ </strong> </h4> </td> </tr>"); } else { %> <tr> <td> <h4> <strong> Станция наблюдения </strong> </h4> </td> < % rocript 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> < %} %> < %if (records! = null && records.size ()! = 0) {для (record r: records) { %> <tr> <td> < %= r.gettaizeheais_num () %> <td> <tld> < %= 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 Div-> <div Align = "center"> <ul Id = "Paginator"> </ul> </div> </form> < %} %> </div> </div> </ul> </div> < %} %> </div> </div> </ul> </div> < %} %> </div> </div> </ul> </div> < %} % Bootstrapmajorversion: 3, // Размер версии Bootstrap: «Нормальный», Itemtexts: function (type, page, current) {switch (type) {case "first": return "Home"; case "prev": return "<i class = 'fa fa-caret-left'> </i> предыдущая страница"; case "Next": return "следующая страница <i class = 'fa fa-caret-right'> </i>"; Дело "последнее": вернуть "последнюю страницу"; Case "Page": return Page; }}, ToolTiptitles: function (type, page, current) {switch (type) {case "First": return "HomePage"; Case "Prev": вернуть "предыдущую страницу"; Case "Next": вернуть "следующую страницу"; Дело "последнее": вернуть "последнюю страницу"; Case "Page": return "Thread" + Page + "Page"; }}, pageurl: function (type, page, current) {return "showinfosearchresult.jsp? pagenoStr ="+page; // Пропустите на выбранную страницу}, NumberOfPages: 6, // Количество опций для отображения «какая страница» в настоящее время на странице: < %= pageno %>, // текущие страницы общие страницы: < %= totalPages %> // Общие страницы} $ ('#paginator'). Bootstrappaginator (опции); </script> </body> </html>3. Относительно записи и классов dbutil, используемых в этом примере:
Класс записей - это обычный класс Java, который инкапсулирует данные и предоставляет только методы GET/SET. Его свойства соответствуют полям, содержащимся в таблице базы данных один за другим. Код заключается в следующем:
Package PaginationExample; импорт java.sql.*;/*** Инкапсулирует информацию о метеорологических данных* @author Zhong**/public Class record {private String taizhan_num; // название станции частная строка TEM; // температура частная струна Hum; // влажность частная строка PA; // давление частного дождя; // дождь частная строка win_dir; // направление ветра частная строка win_sp; // Скорость ветра частная дата временной метки; // Дата наблюдения (исходный формат) /*** Получить имя станции, которая сгенерировала запись наблюдения; * @return Station name*/ public String gettaizhan_num () {return taizhan_num; } /*** Установите имя станции, которая создает запись наблюдения; * @param taizhan_num Название станции для установки*/ public void settaizhan_num (string taizhan_num) {this.taizhan_num = taizhan_num; } /*** Получить температуру; * @return Temperation Значение*/ public String getTem () {return TEM; } /*** Установить температуру; * @param tem Значение температуры для установки*/ public void settem (String tem) {this.tem = tem; } /*** Получить влажность; * @return влажность значение*/ public String gethum () {return hum; } /*** Установить влажность; * @param Hum Hum для установки*/ public void sethum (String hum) {this.hum = hum; } /*** Получить давление; * @return Value*/ public String getPa () {return pa; } /*** Установить давление; * @param pa для установки*/ public void setpa (string pa) {this.pa = pa; } /*** Получить осадки; * @return значения осадков */ public String getRain () {return Rain; } /*** Установите осадки; * @param дождь, чтобы быть установленным значением дождя */ public void setrain (String Rain) {this.rain = rain; } /*** Получить направление ветра; * @return Value Wind Wind */ public String getWin_dir () {return win_dir; } /*** Установить направление ветра; * @param win_dir для установки значения направления ветра */ public void setwin_dir (string win_dir) {this.win_dir = win_dir; } /*** Получить скорость ветра; * @return Speed Wind Speed */ public String getWin_sp () {return win_sp; } /*** Установите направление ветра; * @param win_sp Значение направления ветра, которое будет установлено*/ public void setwin_sp (string win_sp) {this.win_sp = win_sp; } /*** Получить дату наблюдения; * @return Дата наблюдения*/ public timestamp getDate () {дата возврата; } /*** Установить дату наблюдения; * @param Дата дата значения даты наблюдения*/ public void setdate (дата timeStamp) {this.date = date; }}Скриншот соответствующей таблицы Alldata:
Класс DBUTIL-это класс инструментов базы данных, который предоставляет соединения, связанные с базой данных, операторы и т. Д. С следующим кодом:
Package PaginationExample; импорт java.sql. *; import org.apache.tomcat.jdbc.pool.datasource; import org.apache.tomcat.jdbc.pool.poolproperties;/** * Класс инструментов базы данных (используя Tomcat JDBC Pool) * @author zhong * */public class dbut rate rate zhourt zhong * */public class dbut rate rate zhourt zhong * * * static {// Настройка Tomcat JDBC Pool (Pool Bool) PoolProperties p = new PoolProperties (); p.seturl ("jdbc: sqlserver: // localhost: 1433; databaseName = погода"); // Установить подключенный URL P.SetDriverClassName ("com.microsoft.sqlserver.jdbc.sqlserverdriver"); // загрузить драйвер базы данных p.setusername ("sa"); // имя пользователя для удаленного соединения P.SetPassword ("2003niandediyichangxue"); // пароль p.setjmxenabled (true); p.settestwhileidle (false); p.settestonborrow (true); p.setvalidationQuery ("select 1"); p.settestonreturn (false); P.SetValidationInterval (30000); p.settimebetweevictionrunsmillis (30000); p.setmacactive (100); p.setinitialsize (10); p.setmaxwait (10000); P.SetRemoveAbandOneTimeout (60); p.setminevictableidletimemillis (30000); p.setminidle (10); p.setlogabandoned (true); P.SetRemoveAbanded (true); p.setjdbcinterceptors ("org.apache.tomcat.jdbc.pool.interceptor.connectionState;"+ "org.apache.tomcat.jdbc.pool.interceptor.statementfinalizer"); ds = new DataSource (); ds.setpoolproperties (p); } private dbutil () {} /*** Получить подключение к базе данных (соединение); * @return Database Connection */ Public Static Connection getConnection () {connection conn = null; try {conn = ds.getConnection (); } catch (sqlexception e) {e.printstacktrace (); } return conn; } /*** Закройте входящее соединение; * @param Connect Connection, чтобы быть закрытым */ public static void close (connect conn) {try {if (conn! = null) {conn.colose (); conn = null; }} catch (sqlexception e) {e.printstacktrace (); }} /*** Закройте входящий оператор; * @param stmt утверждает, чтобы быть закрытым */ public static void close (оператор stmt) {try {if (stmt! = null) {stmt.close (); stmt = null; }} catch (sqlexception e) {e.printstacktrace (); }} /*** Закройте входящий результат; * @param rs resultset, чтобы быть закрытым */ public static void close (resultset rs) {try {if (rs! = null) {rs.close (); rs = null; }} catch (sqlexception e) {e.printstacktrace (); }}}4. Дополнительное примечание:
①: Когда SQLServer реализует пейджинг, необходимо использовать функцию ROW_NUMBER () для генерации столбца, который записывает номер строки отдельно, чтобы облегчить последующее пейджинг соответствующего интервала числа строки. пример:
Я увидел, что перед тем, как номер строки с именем поля номера строки имел столбец;
(Если первичный идентификатор ключа в таблице является автоматически увеличенным номером, вы также можете использовать идентификатор для получения записи в сегментах, но предпосылка заключается в том, что идентификатор должен быть непрерывно и автоматически увеличивается)
Для получения дополнительной информации о реализации функции Paging by ROW_NUMBER (), пожалуйста, см. В методе реализации SQL Server с использованием ROW_NUMBER Paging
②: MySQL Pagination намного проще в реализации, просто используйте ключевое слово Limit. пример:
Выберите * Из порядок таблицы 1 по ID ASC Limit 3, 2 означает, что после сортировки данных в таблице 1 по значению идентификации (порядок ASC), начиная с третьей строки, возьмите следующие два ряда записей (то есть записи четвертой и пятой строки)
③: Для конкретного использования начального начала вы можете ссылаться на официальный документ (расположенный в папке документа после декомпрессии). Официальный документ очень хорошо написан, простой и легкий для понимания.
При использовании версии Bootstrap V3 вы должны использовать тег <ul> для отображения Bootstrap-Paginator и указать версию Bootstrap, используемую в элементе конфигурации (см. My JSP-примерный метод записи страницы).
(Версия Bootstrap V2 можно использовать непосредственно с помощью тега <div> в примере документа)
④: Обычно используемые формулы для страниц: предположим, что количество отображаемых страниц составляет n, а на каждой странице отображаются части данных, а затем исходная позиция (то есть StartIndex в примере JSP) полученных данных: (n-1)*M+1, а конечная позиция (Endindex)-N*M: (n-1)*M+1
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.