La arquitectura de tres capas Javaee implementa la consulta de paginación de Ajax
Entorno de desarrollo:
Paso 1: Preparación de la implementación del código
Hay muchas publicaciones en Internet al desarrollar trabajo de configuración preliminar en Idea, por lo que no lo repetiré aquí. Principalmente hablo de tres puntos.
En la configuración del servidor, debe seleccionar clases de actualización y recursos para los dos elementos en el cuadro rojo. Después de seleccionar, puede lograr la implementación en caliente.
Para completar el nombre del proyecto aquí. Como la ruta raíz del proyecto
La forma de importar el paquete JAR se muestra en la figura. Haga clic en la dependencia de Iniciar más sesión y seleccione la carpeta LIB que creó.
Importar paquetes jar relacionados: paquete jar de c3p0, paquete de jar de clase de herramientas Dbutils, paquete jar de fastjson, paquete jar de controladores mysql
Escriba los siguientes datos en la tabla de productos de la base de datos test03
Subcontratación del proyecto en idea e importación de la configuración del grupo de conexión C3P0
Tenga en cuenta que el archivo de configuración C3P0 debe modificarse a su propio nombre de base de datos y contraseña de base de datos
En el paquete de dominio, cree la clase de entidad del producto, escriba las propiedades correspondientes en la clase de producto en función de los campos de la tabla de productos en la base de datos. Genere el método Get Set.
Cree una clase de herramientas para obtener objetos de grupo de conexión
Paso 2: Consulte toda la información del producto sin paginar
Ideas de implementación:
JSP/HTML -----> Servlet (Datos de solicitud y respuesta de manejo de la capa web) -----------------> Servicio (Lógica de procesamiento de capa de servicio) -------------------> DAO (DAO Maneja las operaciones de la base de datos)
Cree una página de producto y envíe una solicitud al servidor (obtenga toda la información del producto)
El front-end utiliza el desarrollo receptivo de Bootstrap, que puede hacer que la página sea más hermosa y el desarrollo es más conveniente.
El código para la información de la página es el siguiente:
<! Doctype html> <html lang = "en"> <fead> <meta charset = "utf-8"> <title> Lista de visualización de productos </title> <!-Introducir archivos relatados de bootstrap-> <link rel = "stylesheet" href = "/aJax_product/bootsTrap/csss/bootstrap.cs" rEteJUART "RETTERAWAR nofollow "> <script type =" text/javaScript "src ="/ajax_product/bootstrap/js/jQuery-1.11.3.js "> </script> <script type =" text/javascript "src ="/ajax_product/bootstrap/js/bootstrap.js "> </script> </head> </heal type = "text/javaScript"> // Cuando se carga la página, se envía una solicitud al servidor para recibir todos los datos del producto $ (function () { // =====================================================================================================================================================================================. =========================================================================================================== =========================================================================================================== ============================================================================================================ // Analizar todos los datos transmitidos desde el servidor // ======================================================== La información del producto en la tabla var de productos = evaluación (datos); Protd = $ ("<tr> <td>"+productos [i] .id+"</td> <td>"+productos [i] .name+"</td> <td>"+productos [i] .count+"</td> <td>"+productos [i] .price+"</td> <tr>"); $ ("#tab"). append (protd); id = "tab"> <tr> <th> número </th> <th> Nombre del producto </th> <th> Cantidad </th> <th> Cantidad del producto </th> <th> Precio unitario de producto </th> </tr> </table> </div> </div> </div> </body> </html>Cree un servlet para recibir solicitudes y obtener toda la información del producto
En idea, cree un servlet como se muestra en la siguiente figura
Genere automáticamente anotaciones sin verificar aquí
Después de hacer clic en Aceptar, Idea saltará automáticamente al archivo web.xml y escribirá automáticamente el nombre de ruta completo del servlet, simplemente escriba el patrón URL.
Tenga en cuenta que el patrón URL debe escribirse de manera consistente con el servlet en la solicitud AJAX.
El código del servlet de la capa web es el siguiente:
paquete com.thc.web; import com.alibaba.fastjson.jsonObject; import javax.servlet.http.httpServletResponse; import java.io.ioException; import java.sql.sqlexception; import java.util.list; public class Product Extends HttPservlet {Protected void dopost (htttpServRequest solicitud, httpSeVletRessponse respuesta) droga ServetException, IttpsEnt. Solicitud de código de enmienda. SetcharacterEncoding ("UTF-8"); respuesta.setContentType ("text/html; charset = utf-8"); // Debido a que muestra toda la información del producto, no hay un parámetro para recibir // la capa de servicio debe llamar al método para encontrar todos los datos, obtener el resultado y responder al servicio del servicio de productos del cliente = new Productservice (); Pruebe {// llame a los métodos de la capa de negocios para obtener toda la lista de productos <com.thc.domain.product> allProuct = servicio.findallprouct (); // Convierta los datos obtenidos en la cadena de datos de tipo JSON jsonstring = jsonObject.tojSonstring (allProuct); // Escribir de nuevo a la respuesta del navegador.getWriter (). Write (JSonstring); } Catch (Sqlexception e) {E.PrintStackTrace (); }} protegido void doget (httpservletRequest solicitud, respuesta httpServletResponse) arroja servletException, ioexception {dopost (solicitud, respuesta); }}En la capa de servicio, obtenga datos de la capa DAO y devuélvalos al servlet en la capa web
El código para llamar a la capa de servicio en la capa web es el siguiente
paquete com.thc.service; import com.thc.dao.productdao; import com.thc.domain.product; import java.sql.sqlexception; import java.util.list; public class ProductionService {// En la capa de servicio, obtenga datos de la capa de DAO y devuelva los datos de la capa web de la lista de la lista web <Product> FindAllProucCT () en la capa de Servicio. Dao = new ProductDao (); // Llamando a la capa DAO para consultar todas las listas de productos <Product> allProduct = dao.findallproduct (); return AllProduct; }}Consulta datos del servidor en la capa DAO y proporcione la capa de servicio
paquete com.thc.dao; import com.thc.domain.product; import java.util.list; // ======================================= La capa DAO es específicamente responsable de las operaciones de datos de la base de datos ProductDao {// ================== ELLA INFORMACIÓN DE PRODUCTO PRODUCT dButils para crear el objeto Core de QueryRunner QrerRunner qr = new QueryRunner (jdbcutils.getDataSource ()); // Escribe la instrucción SQL para consultar todos los productos cadena sql = "Seleccionar * desde el producto"; // Convierta el producto al producto en una colección de listas, y la lista genérica a productos <Product> Products = Qr.Query (SQL, New Beanlisthandler <> (Product.Class)); productos de devolución; }}Después de que la capa DAO obtiene los datos, los pasa a la capa de servicio. La capa de servicio luego la pasa al servlet de la capa web. Después de que el servlet obtenga los datos, se guarda en la recopilación de la lista y luego convierte la recopilación de la lista en un tipo de datos JSON y lo escribe en el navegador. El siguiente código en la página front-end es analizar los datos JSON devueltos por el servlet
$ .post (url, function (data) {// Analizar todos los datos transmitidos desde el servidor // ======================================================== ================================================================= ================================================================ ================================================================= ================================================================ ================================================================= ================================================================ ================================================================= y agregue a la tabla, agregue datos a la tabla $ ("#pestaña"). Append (protd);A través de la herramienta Grabber de paquete proporcionada por Google Chrome, puede ver los datos de la respuesta de servlet
Copie todos los datos de respuesta, que son los siguientes datos. Una matriz tiene el objeto de producto anidado.
Todos los objetos existen en forma de pares de valor clave.
Por ejemplo, en los primeros datos, la clave es contar y el valor es 100. La clave es ID, el valor es 1, la clave es el nombre, el valor es TV, la clave es el precio, el valor es 2000
[{"contar": 100, "id": 1, "nombre": "tv", "precio": 2000}, {"cuenta": 200, "id": 2, "nombre": "lavadora", "precio": 1000}, {"cuenta": 300, "id": 3, "nombre": "acondicionador de aire", "precio": 3000}, {"contar": 50, "id": 4, "nombre": "proyector", "precio": 2000}, {"cuenta": 1000, "id": 5, "nombre": "computadora hp", "precio": 4000}, {"cuenta": 100, "id": 6, "nombre": "Apple", "precio": 5000}, {"contar": 60, "id": 7, "nombre": "máquina de coser", "precio": 2000}, {"contar": 100, "id": 8, "nombre": "box xiaomi", "precio": 2200}, {"recuento": 300, "id": 9, "nombre": "dispenser", "precio": 2000}, 2000},, 2000}, {"contar": 200, "id": 10, "nombre": "purificador de agua", "precio": 2000}, {"cuenta": 500, "id": 11, "nombre": "calentador eléctrico", "precio": 2000}, {"cuent": 100, "id": 12, "nombre": "juicker", "precio": 399},, {"contar": 200, "id": 13, "nombre": "cocina de presión eléctrica", "precio": 498}, {"cuenta": 300, "id": 14, "nombre": "cocina de arroz", "precio": 299}, {"cuenta": 50, "id": 15, "nombre": "Microwave Oven", "Price": 1299}, {"contar": 200, "id": 16, "nombre": "fabricante de leche de soya", "precio": 199}, {"cuenta": 300, "id": 17, "nombre": "Cooker de inducción", "precio": 398}, {"Cond": 500, "id": 18, "Nombre": "Humidifier", "Price": 99}, {"contar": 250, "id": 19, "nombre": "maquinilla de afeitar", "precio": 98}, {"contar": 1000, "id": 20, "nombre": "seguridad", "precio": 16.5}, {"cuenta": 1200, "id": 21, "nombre": "diapai", "precio": 8.8}, {"contar": 1500, "id": 22, "nombre": "libai", "precio": 9.9}]Sin paginación, el efecto de visualización es el siguiente:
Todos los datos se muestran en una página. Si hay muchos datos, por ejemplo, en busca de una palabra clave sobre Baidu, puede haber decenas de miles o cientos de millones de ellos. Lleva mucho tiempo obtener tantos resultados de la base de datos y darle mucho al navegador. La experiencia del usuario es extremadamente pobre, por lo que se requiere tecnología de paginación. Se usa la paginación física.
Solo consulte la información requerida para la página actual de la base de datos a la vez.
Paso 3: pase el número actual de páginas y el número de páginas que se muestran al servidor
La página HTML debe aumentar el número actual de páginas y el número de páginas que se muestran por página, y pasarla al servidor
Cambie el código como se muestra en la siguiente figura:
En la capa de servlet, se deben recibir los parámetros y los datos correspondientes de la página actual se consultan desde la capa de servicio. El código es el siguiente:
El producto de clase pública extiende httpservlet {protegido void dopost (httpservletRequest solicitud, respuesta httpservletResponse) lanza ServletException, ioexception {// manejar la solicitud de código confuso. SetcharacterEncoding ("UTF-8"); respuesta.setContentType ("text/html; charset = utf-8"); // La página actual int pageno = integer.parseInt (request.getParameter ("pageno")); // El número de entradas mostradas por página int pageSize = Integer.ParseInt (request.getParameter ("PageSize")); // Debido a que muestra toda la información del producto, no hay un parámetro para recibir // la capa de servicio debe llamar al método para encontrar todos los datos, obtener el resultado y responder al servicio del servicio de productos del cliente = new Productservice (); Pruebe {// Según el número de páginas mostradas y cada página, obtenga datos de la lista de capa de servicio <com.thc.domain.product> producto = servicio.findproduct (pageno, pageSize); String jsonstring = jsonObject.tojSonstring (producto); // Escribir de nuevo a la respuesta del navegador.getWriter (). Write (JSonstring); } Catch (Sqlexception e) {E.PrintStackTrace (); }} protegido void doget (httpservletRequest solicitud, respuesta httpServletResponse) arroja servletException, ioexception {dopost (solicitud, respuesta); }}Nuevo método para encontrar datos de página actuales agregados en la capa de servicio
Lista pública <Product> FindProduct (int pageno, int PageSize) lanza SQLException {ProductDao Dao = new ProductDao (); Lista <Product> Product = Dao.FindProduct (pageno, PageSize); producto de devolución; }El nuevo método para encontrar la página actual de la base de datos agregada en la capa DAO
Lista pública <Product> FindProduct (int Pageno, int PageSize) lanza SQLException {QUERYRUNNER QR = New QueryRunner (jdbcutils.getDataSource ()); Cadena sql = "seleccionar * desde el límite del producto?,?"; // Limite el primer parámetro: comience desde dónde en la base de datos, el índice comienza desde 0 // El segundo parámetro: cuántas verificaciones cada vez // la regla del primer parámetro es: reste el número actual de páginas por una, multiplique por el número de consultas por lista de páginas <Product> ProductList = Qr.Query (Sql, New BeanlisThandler <> (producto. pageSize); devolver la lista de productos; }El lado del navegador muestra como se muestra en la figura a continuación: Solo la información del producto con PageSize (el valor actual es 6) se mostrará a la vez.
Sin embargo, no es posible girar dinámicamente las páginas haciendo clic en el botón de página.
Entonces, debemos considerar cómo la página muestra la barra de paginación y cómo deben encapsularse los datos.
Sabemos que el número de páginas que se muestran en la barra de paginación de la página se cambia dinámicamente . El número total de páginas = el número total de datos/datos que se muestran en cada página debe redondearse hacia arriba. En otras palabras, además de los datos de la lista <producto>, nuestra página también necesita el número total de datos, el número total de páginas, la página actual y el número de pantallas por página. Además, el pageno en la página actual también cambia dinámicamente. ¿En cuántas páginas se hacen clic en la página? Pageno es el número de pageno. Por lo tanto, necesitamos crear otro Javabean (PageBean.java) para encapsular estos datos, y luego convertirlos en datos JSON y enviarlo al cliente para que lo muestre.
Paso 4: Encapsular los datos relevantes de la página en un Javabean
Cree una clase llamada PageBean en el paquete de dominio, con las siguientes propiedades:
private int pageno; // número de página actual private int pagesize; // El número de que se muestra en cada página private int totalCount; // ¿Cuántos datos de información del producto hay en total privado int totalpage; // cuántas páginas de datos hay en una lista privada total <product> productos; // Conjunto de datos de información del producto
Pase el número actual de páginas (pageno) en la capa de servicio y el número de páginas que se muestran en cada página (páginas) y devuelva un Pagean a la capa web.
El código final de la capa web es el siguiente
El producto de clase pública extiende httpservlet {protegido void dopost (httpservletRequest solicitud, respuesta httpservletResponse) lanza ServletException, ioexception {// manejar la solicitud de código confuso. SetcharacterEncoding ("UTF-8"); respuesta.setContentType ("text/html; charset = utf-8"); // La página actual int pageno = integer.parseInt (request.getParameter ("pageno")); // El número de entradas mostradas por página int pageSize = Integer.ParseInt (request.getParameter ("PageSize")); // Debido a que muestra toda la información del producto, no hay un parámetro para recibir // la capa de servicio debe llamar al método para encontrar todos los datos, obtener el resultado y responder al servicio del servicio de productos del cliente = new Productservice (); Pruebe { /* llame al método de capa de negocios para obtener todos los productos List <Com.thc.domain.product> allProuct = Service.findallProuct (); Convierta los datos obtenidos en la cadena de datos de tipo JSON jsonstring = jsonObject.tojSonstring (allProuct);*/// obtiene datos de la capa de servicio en función de la página actual y el número que se muestra en cada página // list <com.thc.domain.product> Product = Service.FindProduct (PageNo, Pagesize); // ====================================================================================. // ================================================================== ===================================================================== ===================================================================== ===================================================================== jsonstring = jsonObject.ToJSonstring (PageBean); // ================================================================ tiempos } Catch (Sqlexception e) {E.PrintStackTrace (); }} protegido void doget (httpservletRequest solicitud, respuesta httpServletResponse) arroja servletException, ioexception {dopost (solicitud, respuesta); }}En el servicio, debe obtener toda la información del PageBean, y Pageno y PageSize son conocidos. Debe obtener los datos de información del producto y la recopilación de la lista de la capa DAO, y también debe obtener la información total de información del producto del producto. Cuántas páginas se pueden dividir por los datos totales por los datos que se muestran en cada página y redondeadas hacia arriba.
El código final de la capa de servicio es el siguiente:
Productservice de productos de clase pública {// En la capa de servicio, obtenga datos de la capa DAO y devuelva los datos a la capa web // ======================================= Lista pública <Product> FindallPreuct () tira SqlExceptualception {ProductDao Dao = New ProductDao (););); // Llamando a la capa DAO para consultar todas las listas de productos <Product> allProduct = dao.findallproduct (); return AllProduct; } //========================================================================== public List<Product> findProduct(int pageNo, int pageSize) throws SQLException { ProductDao dao = new ProductDao (); Lista <Product> Product = Dao.FindProduct (pageno, PageSize); producto de devolución; } //============================================================================ public PageBean findPageInfo(int pageNo, int pageSize) throws SQLException { ProductDao dao = new ProductDao (); Lista <Product> Product = Dao.FindProduct (pageno, PageSize); int totalCount = dao.findTotalCount (); PageBean pb = new PageBean (); // Encapsular datos pb.settotalCount (TotalCount); Pb.SetPageno (Pageno); PB.SetPageSize (PageSize); pb.setProducts (producto); // Desde hacia arriba y calcula el número total de páginas. No olvide multiplicar por 1.0, de lo contrario, faltará una página de datos int totalPage = (int) Math.ceil (TotalCount*1.0/PageSize); PB.SettotalPage (TotalPage); // Da los datos al Servlet Return Pb; }}En la capa DAO, se agrega un nuevo método para consultar el número total de información de la base de datos.
El código final de la capa DAO es el siguiente
// ============================. nuevo QueryRunner (jdbcutils.getDataSource ()); // Escribir declaraciones SQL para consultar todos los productos String sql = "Seleccionar * desde el producto"; // Convierta el producto en la colección de la lista, y el genérico al producto es la lista de productos <Product> Products = Qr.Query (SQL, New Beanlisthandler <> (Product.Class)); productos de devolución; } // =====================================-- Cadena sql = "seleccionar * desde el límite del producto?,?"; // Limite el primer parámetro: dónde comenzar en la base de datos, el índice comienza desde 0 // el segundo parámetro: cuántos cada vez que verifica // La regla del primer parámetro es: reste el número actual de páginas por una, multiplique por el número de consultas por lista de páginas <Product> ProductList = Qr.Query (Sql, New BeanLisThandler <> (producto), (pAGEGEAYAYAIEDE, 1, 1, 1, 1, 1, 1, 1, 1, 1), 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1. pageSize); devolver la lista de productos; } // ============== ¿Cuántos datos hay en la consulta? ============================ Public int FindToTalCount () lanza SQLException {QURUNRUNNER QR = new QueryRunner (jdbcutils.getDataSource ()); Cadena sql = "select count (*) del producto"; Long Countl = (Long) Qr.query (SQL, New ScalarHandler ()); return countl.intValue (); }}Paso 5: Procese la página front-end
En la etiqueta de la tabla, agregue una línea para proporcionar el componente de paginación. Comente el código LI porque debe mostrarse dinámicamente.
Declarar las variables de parámetros que se recibirán primero
var url = "/ajax_product/producto"; var pageno = 1; // La página actual se establece en 1VAR PageSize = 6; // En cada página muestra 6 información del producto Var TotalPage; // cuántas páginas de datos hay en productos VAR totales; // Información de datos del producto
Después de escribir la solicitud de publicación de AJAX, la captura de paquetes prueba si el navegador recibe datos.
$ .post (URL, // La dirección de datos transmitidas al servidor {"Pageno": Pageno, "PageSize": PageSize}, // El número actual de páginas y el número de piezas que se muestran por función de la página (datos) {})Obtuve los siguientes datos después de atrapar el paquete
{"Pageno": 1, "PageSize": 6, "Products": [{"Contado": 100, "Id": 1, "Nombre": "TV", "Precio": 2000}, {"Count": 200, "Id": 2, "Nombre": "Sava de la lavadora", "Price": 1000}, {"Count": 300, "Id": 3, "Nombre" acondicionador "," precio ": 3000}, {" contar ": 50," id ": 4," nombre ":" proyector "," precio ": 2000}, {" contar ": 1000," id ": 5," nombre ":" hp computadora "," precio ": 4000}, {" contar ": 100," id ":" nombre ":" phone de manzana "," precio ": 5000}, 5000}, "TotalCount": 22, "TotalPage": 3}Significa que el lado del servidor puede responder al navegador normalmente. Luego escriba el código front-end
Mostrar datos en la tabla
Primero analice los datos obtenidos por el backend, luego sincronice en el código JS, obtenga una matriz de datos de todos los objetos del producto a través de PageBean.Products, luego itera a través de esta matriz y emplome el valor del atributo del producto en la tabla.
El código es el siguiente
$ .post (url, // La dirección de los datos transmitidos al servidor {"Pageno": Pageno, "PageSize": PageSize}, // El número actual de páginas y el número de piezas que se muestran por página se transmiten a la función del navegador (datos) {// Analize todos los datos de la página transmitidos desde el servidor, el format es JSON Var PageBean = eval (datos); pageno = PageBean.pageno; =======================================================================================================================================================================================================================================================. =======================================================================================================================================================================================================================================================. =======================================================================================================================================================================================================================================================. =======================================================================================================================================================================================================================================================. para (var i = 0; i <products.length; i ++) {// transferir var var protd = $ ("<tr> <td>"+productos [i] .id+"</td> <td>"+productos [i] .name+"</td> <td>"+productos [i] .cunt+"</td> <td>"+productos [i].].] </tr> "); // Agregar a la tabla, agregar datos a la tabla $ ("#pestaña "). append (protd);}}," json ")Después de escribir este código, el servidor se puede activar para probar si los datos se pueden obtener en la tabla. Los datos se muestran correctamente después de la prueba.
Muestra los datos de la barra de página
Primero muestre los datos de la página anterior y la página siguiente
// Mostrar los datos de la barra de página // No considerar la función, se puede mostrar primero // Mostrar la página anterior var preli = $ ('<li> <a href = "#" rel = "nofollow" externo "rel =" nofollow "externo" rel = "nofollow" rElfollow "rel =" nofollow externo "rel =" externo "Rel" Rel = "externo externo"> Página anterior </a> </li> li>//////Añade; $ (". $ (". Pager"). Append (NextLi);Los resultados de la prueba son los siguientes:
Mostrar datos de número de página:
// Mostrar los datos de la barra de página // No considerar la función, se puede mostrar primero // Mostrar la página anterior var preli = $ ('<li> <a href = "#" rel = "nofollow" externo "rel =" nofollow "rel =" externo nofollow "rel =" nofollow externo "rel =" externo "externo" rel = "externo" rect "rel =" externo "externo" externo "externo" página </a> </li> '); // Agregar $ (". Pager"). Append (preli); // viajar a través del número de página para (var i = 1; i <= totalPage; i ++) {// create li tag var li = $ (' <li> <a href = "#" rel = "externo nofuck" rel = "externo nofollow" rel = "externo nofing" nofing "rollowing" regu " rel = "nofollow externo" rel = "nofollow externo"> '+i+' </a> </li> '); // Agregar a UL a través del selector de clases $ (". Pager"). Append (li);} // Muestre la página siguiente var nextLi = $ ('<li> <a href = "#" rel = "nofollow" rel = "noflow" rollow "rEllollo externo" Rel = "RELFollow" RELFollow "RELFollow" RELLE "REL ALGO ALGULO" REL ALGO ALGO ALGOLA "externo". > Página siguiente </a> </li> '); // Agregar $ (". Pager"). Append (nextLi);El efecto se muestra en la figura a continuación:
La página actual se resalta
Dado que la clase Pager no admite resaltar en Bootstrap, la clase de paginación se reemplaza por paginación.
La lógica de resaltar es determinar si es la página actual (pageno) al atravesar.
Agregar el atributo activo de la clase a la etiqueta li
// transferir el número de página para (var i = 1; i <= totalPage; i ++) {var li; if(i===pageNo){ //============== It is the current page, highlight li=$('<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>'); // Agregar a UL a través del selector de clases $ (". Pagination"). Append (Li); } else {// =========== No es la página actual, no resaltar li = $ ('<li> <a href = "#" rel = "nofollow externo" rel = "nofollow" reat "rel =" external nofollow "rel =" externo "rel =" nofollow externo "rel =" externo "externo">'+i+'</a> </li>'); // Agregar a UL a través del selector de clases $ (". Pagination"). Append (Li); }}El efecto es el siguiente
Agregue los eventos de clic en el número de página y cambie los datos.
No se requiere evento de clic en la página actual
Agregue un evento OnClick a la etiqueta A en el número de páginas y vincule una función skippage (). La operación en la función skippage () es en realidad la operación de enviar una solicitud de publicación AJAX al servidor cuando obtenemos los datos de la primera página. Por lo tanto, copie el código de $ (function () {}) en la función skippipage () y luego llame a la función skippage () cuando se carga la página. Pasar 1 significa que los datos de la página 1 se cargan de forma predeterminada. En este momento, $ (function () {}) solo se ejecutará una vez. Skippage () se convierte en una función recursiva y se llama a sí misma. Sin embargo, un solo evento de clic solo llamará al método Skippage una vez, que es diferente de la recursión en Java.
Después de ejecutar este código, haga clic en diferentes códigos y encuentre que el contenido de la tabla y la barra de página se superpustarán continuamente.
Como se muestra en la figura a continuación:
Borre los datos cada vez que se cargan los datos. Borrar la barra de la página
Después de agregar el código para borrar la barra de página, descubrí que la barra de página no se ha superpuesto, pero la tabla aún se superpone.
Borrar el formulario
$("#tab").empty(); Después de ejecutar el código claro para la tabla, encontré el siguiente fenómeno:
La primera línea de la tabla ha desaparecido, por lo que debe usar un selector para excluir la primera línea.
$ ("#pestaña tr: no (: primero)") significa
Primero seleccione la tabla de acuerdo con el selector de identificación
Luego, desde el selector jerárquico, seleccione la fila TR
El selector básico primero está anidado en el selector básico no, lo que significa que no es la primera línea
El significado general es que si la tabla no es la primera fila, el método vacía () se llama para eliminar todos los nodos infantiles en la colección de elementos coincidentes.
Después de las pruebas, se puede eliminar la primera línea de datos
Determinar si está disponible en la página anterior y cambiar los números de página
Si la página actual es la primera página, la función de página anterior no está disponible.
Si la página actual no es la primera página, agregue un evento de clic, cambie a la página anterior y reduzca el número de página por uno.
// Mostrar la página anterior y determinar si VAR Preli está disponible; if (pageno === 1) {// Si la página actual es la primera página, la función de la página anterior no está disponible preli = $ ('<li> <a href = "javascript: void (0)" rel = "nofowlow" rELL "rELL" externo "rElfollow" Rel = "externo" Rel = "Rel =" RELFollow "RELA" REL ALGO ALGO ALGO ALGO ALGO ALGO ALGO ALGO ALGO ALGO ALGULO ". rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" nofollow "rel =" nofollow "rol" rol "rEllollo externo" Rel = "rElollo externo" REL = "RELFollow externo Rel =" Rel = "externo Rel" Rel = "RELFollow externo" externo Rel "Rel" Rel "externo" Rel "Rel" Rel "Rel" Rel "Rel" RELLOW ALGULA "EXTERNA" REL ALGO ALGULO "REL ALGOLA" REL ALGOLA CERTER "Rel" rel = "nofollow externo" rel = "externo nofollow" rel = "externo nofollow" rel = "externo nofollow"> página anterior </a> </li> ');} else {preli = $ (' <li> <a href = "javaScript: void (0)" rel = "externo nofollow" rel = "externo" rang "rang =" externo "rEllollow" rel = "rel =" externo "externo" Rel = "Rel" externo "Rel" Rel "Rel" RELFollow "Rel =" Rel = "Rel =" externo Rel = "Rel =" nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "onClick =" skippage ('+(pageno-1)+' ') "> página anterior </a> </li>');} // use el selector de clases, agregar $ (". Pagination "). Append (PReli);Determine si está disponible en la página siguiente y cambia la función de números de página
Si la página actual es la última página, la función de página anterior no está disponible.
Si la página actual no es la última página, agregue un evento de clic, cambie a la página siguiente y agregue un número de página.
// Muestre la página siguiente y determine si VAR NextLi está disponible; if (pageno === TotalPage) {// Si la página actual es la última página, la función de la página anterior no está disponible. nextLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" externo nofollow "rel =" nofollow "rel =" nofollow "role" rel = "externo" Rel = "nofollow externo" Rel = "Relfollo externo Rel =" externo Rel = "Rel" Rel "Rel" Rel "Rel" externo "External Rel =" Rel = "externo página </a> </li> ');} else {// Si la página actual no es la última página, agregue un evento de clic, cambie a la página anterior y reduzca el número de página por uno. rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+(pageNo+1)+')">Next page</a></li>');}// Through the class selector, add $(".pagination").append(nextLi);至此,前端页面的代码全部完成,功能全部实现
前端页面的全部代码如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>商品展示列表</title> <!--引入bootstrap相关文件--> <link rel="stylesheet" href="/ajax_product/bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" > <script type="text/javascript" src="/ajax_product/bootstrap/js/jquery-1.11.3.js"></script> <script type="text/javascript" src="/ajax_product/bootstrap/js/bootstrap.js"></script></head><script type="text/javascript"> var url ="/ajax_product/product"; var pageNo=1;//当前页面设置为1 var pageSize=5;//每页显示6条商品信息var totalPage;//一共有多少页数据var products;//商品的数据信息//页面加载时,向服务器发送请求,接收全部的商品数据$(function () { skipPage(1); }); function skipPage(page) { //===========分页时的post请求=================================== pageNo=page; //=====向服务器发送post请求$.post( url,//给服务器传送数据的地址{"pageNo": pageNo, "pageSize": pageSize},//给浏览器传递当前页面数和每页显示的条数function (data) { //解析服务器端传过来的全部pagebean数据,格式为json类型var pagebean = eval(data); //同步数据pageNo=pagebean.pageNo; pageSize=pagebean.pageSize; totalPage=pagebean.totalPage; products=pagebean.products; //显示表格中的数据=============================================== //$("#tab").empty(); $("#tab tr:not(:first)").empty(); for (var i = 0; i < products.length; i++) { //遍历每一行的数据var protd =$("<tr><td>"+products[i].id+"</td><td>"+products[i].name+" </td><td>"+products[i].count+"</td><td>"+products[i].price+"</td></tr>"); // 并添加到表格中,添加数据到表格中$("#tab").append(protd); } //显示分页条的数据======================================================== //清空分页条$(".pagination").empty(); //先不考虑功能,先能显示出来//显示上一页,判断是否可用var preLi; if(pageNo===1){ //如果当前页是第一页,上一页功能就不可用. preLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一页</a> </li>'); }else{ //如果当前页不是第一页,就添加点击事件,切换到上一页,把页码减一. preLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+(pageNo- 1)+')">上一页</a></li>'); } //通过类选择器,添加进去$(".pagination").append(preLi); //遍历显示页码for (var i = 1; i <= totalPage; i++) { var li; if(i===pageNo){ //=========是当前页,就高亮显示li=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+i+'</a> </li>'); //通过类选择器,添加到ul中$(".pagination").append(li); }else{ //========不是当前页,不高亮显示.添加点击事件,参数传递为当前页码li=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+i+')">'+i+'</a></li>'); //通过类选择器,添加到ul中$(".pagination").append(li); } } //显示下一页,判断是否可用var nextLi; if(pageNo===totalPage){ //如果当前页是最后一页,上一页功能就不可用. nextLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一页</a> </li>'); }else { //如果当前页不是最后一页,就添加点击事件,切换到上一页,把页码减一. nextLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+ (pageNo+1)+')">下一页</a></li>'); } //通过类选择器,添加进去$(".pagination").append(nextLi); },"json") }</script><body><h3 align="center">促销商品展示</h3><div> <!--商品的表格占一行--> <div> <div> <!--table-hover表示当鼠标移入这一行表格的时候,颜色变化table-bordered表示给表格加边框--> <table id="tab"> <tr> <th>编号</th> <th>商品名称</th> <th>商品数量</th> <th>商品单价</th> </tr> </table> </div> </div> <div> <div > <nav> <ul> <!--此处代码由js动态生成--> </ul> </nav> </div> </div></div></body></html>Resumir
此分页功能,用到了JavaEE的三层架构的思想.每一层各司其职,做各自的负责的事情.前端部分为难点.需要处理的细节很多.前端涉及到了ajax和jquery.jQuery的一些语法与选择器的相关的东西要非常熟练.还用到了bootrap响应式开发,让前端页面的布局更加方便.
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.