L'architecture à trois couches Javaee implémente la requête de pagination ajax
Environnement de développement:
Étape 1: Préparation de la mise en œuvre du code
Il existe de nombreux articles sur Internet lors du développement de la configuration préliminaire du travail dans l'idée, donc je ne le répéterai pas ici. Je parle principalement de trois points.
Dans la configuration du serveur, vous devez sélectionner des classes de mise à jour et des ressources pour les deux éléments de la boîte rouge. Après avoir sélectionné, vous pouvez réaliser un déploiement à chaud.
Pour remplir le nom du projet ici. Comme le chemin racine du projet
La façon d'importer le package JAR est indiquée sur la figure. Cliquez sur la dépendance de la connexion plus et sélectionnez le dossier LIB que vous avez créé.
Importer des packages JAR connexes: package JAR C3P0, package JAR de classe d'outils DBUTILS, package JAR FASTJSON, package de jar MySQL Driver
Écrivez les données suivantes dans le tableau des produits de la base de données test03
Sous-traitant le projet dans l'idée et importation de la configuration du pool de connexion C3P0
Notez que le fichier de configuration C3P0 doit être modifié à son propre nom de base de données et mot de passe de base de données
Dans le package de domaine, créez la classe d'entités de produit, écrivez les propriétés correspondantes dans la classe de produits en fonction des champs de la table de produit dans la base de données. Générez la méthode Get Set.
Créer une classe d'outils pour obtenir des objets de pool de connexion
Étape 2: Interrogez toutes les informations du produit sans pagination
Idées de mise en œuvre:
JSP / HTML -----> Servlet (les données de demande de calque Web) -----------------> Service (Logique de traitement de la couche de service) -------------------> DAO (DAO Couche Handles Operations de base de données)
Créez une page de produit et envoyez une demande au serveur (obtenez toutes les informations du produit)
Le front-end utilise un développement sensible à la bootstrap, ce qui peut rendre la page plus belle et le développement est plus pratique.
Le code des informations sur la page est le suivant:
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <title> Liste d'affichage des produits </ title> <! - Introduire des fichiers liés à bootstrap -> <link rel = "Stylesheet" href = "/ ajax_product / bootstrap / css / bootsstrap. rel = "external nofollow"> <script type = "text / javascript" src = "/ ajax_product / bootstrap / js / jQuery-1.11.3.js"> </ script> <script type = "text / javascript" src = " type = "text / javascript"> // Lorsque la page se charge, une demande est envoyée au serveur pour recevoir toutes les données du produit $ (function () { // ===========================================================================================================. ============================================================================================================. ============================================================================================================. ===========================================================================================================. // Analyser toutes les données transmises à partir du serveur // =======================================================================================================================================================================================================================. var protd = $ ("<tr> <td>" + produits [i] .id + "</td> <td>" + produits [i] .name + "</td> <td>" + produits [i] .Count + "</td> <td>" + produits [i] .Price + "</td> </tr>"); $ ("# tab"). Ajouter (protd);}}, "json")}) </cript> <body> <h3 align = "Center"> Promotional Product Affichage </h3> <v> <! - La table de produit occupe une ligne -> <div> <div> id = "tab"> <tr> <th> numéro </th> <th> Nom du produit </th> <th> Quantité </th> <th> Quantité du produit </th> <th> Prix unitaire du produit </th> </tr> </-table> </div> </div> </div> </ body> </html>Créer un servlet pour recevoir des demandes et obtenir toutes les informations du produit
Dans l'idée, créez un servlet comme indiqué dans la figure suivante
Générer automatiquement des annotations sans vérifier ici
Après avoir cliqué sur OK, l'idée sautera automatiquement dans le fichier web.xml et rédigera automatiquement le nom du chemin complet du servlet, écrivez simplement le schéma d'URL.
Notez que le schéma d'URL doit être écrit conformément au servlet dans la demande AJAX.
Le code du servlet de couche Web est le suivant:
Package com.thc.web; import com.alibaba.fastjson.jsonObject; import com.thc.service.productService; import javax.servlet.servletException; import javax.servlet.http.httpservlet; import javax.servlet.http.httpluservlet javax.servlet.http.httpservletResponse; import java.io.ioexception; import java.sql.sqlexception; import java.util.list; public class product étend httpservlet {protected void dopost (httpsservletrequest request, httpsertresponse réponse) lance le serviette, ioexpection httplersponse. Code brouillé request.SetcharAtterencoding ("UTF-8"); Response.SetContentType ("Text / HTML; charSet = UTF-8"); // Parce qu'il affiche toutes les informations sur le produit, il n'y a pas de paramètre à recevoir // La couche de service doit appeler la méthode pour trouver toutes les données, obtenir le résultat et répondre à Client ProductService Service = new ProductiveService (); essayez {// appelez les méthodes de la couche commerciale pour obtenir toutes les listes de produits <com.thc.domain.product> allprouct = service.findallprouct (); // convertit les données obtenues en chaîne de données de type JSON jsonstring = jsonObject.tojSontring (allProuct); // écrivez dans le navigateur Response.getWriter (). WRITE (JSONSTRING); } catch (sqlexception e) {e.printStackTrace (); }} Protected void doGet (HttpServLetRequest Request, HttpServletResponse Response) lève ServletException, ioException {doPost (request, réponse); }}Dans la couche de service, obtenez des données à partir de la couche DAO et renvoyez-la au servlet dans la couche Web
Le code pour appeler la couche de service dans la couche Web est le suivant
Package com.thc.service; import com.thc.dao.productdao; import com.thc.domain.product; import java.sql.sqlexception; import java.util.list; public class producceservice {// dans la couche de service, obtenir des données à partir de la couche DAO et des données de retour à la couche Web Liste publique <Product> ProductDao dao = new ProductDao (); // Appel de la couche DAO pour interroger tous les produits List <Dudce> AllProduct = dao.FindallProduct (); retourner allproduct; }}Remettre en question les données du serveur dans la couche DAO et donner la couche de service
package com.thc.dao; import com.thc.domain.product; import com.thc.utils.jdbcutils; import org.apache.commons.dbutils.queryrunner; import org.apache.commons.dbutils.handlers.beanlisthandler; import java.sql.sqlexception; java.util.list; // ====================================== Le couche Dao est spécifique DBUTILS pour créer le requête de requête de l'objet Core QueryRunner QR = new queryRunner (jdbcutils.getDataSource ()); // Écrivez l'instruction SQL pour interroger tous les produits String SQL = "SELECT * dans le produit"; // convertit le produit en produit en une collection de liste, et le générique en liste de produits <product> products = qr.query (SQL, new Beanlisthandler <> (product.class)); produits de retour; }}
Une fois que la couche DAO a obtenu les données, elle la transmet à la couche de service. La couche de service le passe ensuite au servlet de la couche Web. Une fois que le servlet a obtenu les données, il est enregistré dans la collecte de la liste, puis convertit la collecte de la liste en type de données JSON et l'écrit au navigateur. Le code suivant dans la page frontale consiste à analyser les données JSON renvoyées par le servlet
$ .post (URL, fonction (données) {// analyser toutes les données transmises à partir du serveur // ================================================================================================. =======================================================================. ======================================================================. =======================================================================. ======================================================================. =======================================================================. ======================================================================. =======================================================================. et ajouter à la table, ajouter des données à la table $ ("# onglet"). Ajouter (protd);Grâce à l'outil Package Grabber fourni par Google Chrome, vous pouvez voir les données de la réponse du servlet
Copiez toutes les données de réponse, qui sont les données suivantes. Un tableau a l'objet produit imbriqué.
Des objets existent tous sous la forme de paires de valeurs clés.
Par exemple, dans les premières données, la clé est le nombre et la valeur est 100. La clé est ID, la valeur est 1, la clé est le nom, la valeur est la télévision, la clé est le prix, la valeur est 2000
[{"Count": 100, "Id": 1, "Name": "TV", "Price": 2000}, {"Count": 200, "Id": 2, "Name": "Washing Machine", "Price": 1000}, {"Count": 300, "Id": 3, "Name": "Air Conditioner", "Price": 3000},, " {"count": 50, "id": 4, "nom": "projecteur", "prix": 2000}, {"count": 1000, "id": 5, "name": "HP Computer", "Price": 4000}, {"Count": 100, "Id": 6, "nom": "Apple Phone", "Price": 5000},,, " {"count": 60, "id": 7, "name": "couture machine", "prix": 2000}, {"count": 100, "id": 8, "name": "xiaomi box", "prix": "2200}," Count ": 300," id ": 9," nom ":" dispenser "," prix ": 2000}, {"Count": 200, "id": 10, "nom": "purificateur d'eau", "prix": 2000}, {"count": 500, "id": 11, "nom": "Electric Heater", "Price": "Juinking", "Price": 399}, {"Count": 200, "id": 13, "nom": "Electric Pressure Cooker", "Price": 498}, {"Count": 300, "ID": 14, "Name": "Rice Cooker", "Price": 299}, {"Count": 50, "id": 15, "Nom": "Microwave Oven", "Price": 1299}, {"count": 200, "id": 16, "nom": "Soy Milk Maker", "Price": 199}, {"count": 300, "id": 17, "name": "induction Cooker", "Price": 398}, {"Count": 500, "id": 18, "Name": "Humidififier", "Price": 99}, " {"count": 250, "id": 19, "name": "razor", "prix": 98}, {"count": 1000, "id": 20, "name": "Safety", "Price": 16.5}, {"count": 1200, "id": 21, "nom": "diapai", "prix": 8.8}, {"count": 1500, "id": 22, "nom": "libai", "prix": 9.9}]Sans pagination, l'effet d'affichage est le suivant:
Toutes les données sont affichées dans une page. S'il y a beaucoup de données, par exemple, à la recherche d'un mot-clé sur Baidu, il peut y avoir des dizaines de milliers ou des centaines de millions d'entre eux. Il faut beaucoup de temps pour obtenir autant de résultats de la base de données et donner tellement au navigateur. L'expérience utilisateur est extrêmement médiocre, donc la technologie de pagination est requise. La pagination physique est utilisée.
Interrogez uniquement les informations requises pour la page actuelle de la base de données à la fois.
Étape 3: Passez le nombre actuel de pages et le nombre de pages affichées au serveur
La page HTML doit augmenter le nombre actuel de pages et le nombre de pages affichées par page et la transmettre au serveur
Modifiez le code comme indiqué dans la figure suivante:
Dans la couche servlet, les paramètres doivent être reçus et les données correspondantes de la page actuelle sont interrogées à partir de la couche de service. Le code est le suivant:
Le produit de classe publique étend httpServlet {protected void doPost (httpServLetRequest request, httpservletResponse réponse) lève Servlexception, ioException {// gère le code brouillé request.SetcharAtterencoding ("utf-8"); Response.SetContentType ("Text / HTML; charSet = UTF-8"); // la page actuelle int pageno = Integer.ParseInt (request.getParameter ("pageno")); // le nombre d'entrées affichées par page int pagesize = Integer.ParseInt (request.getParameter ("pagesize")); // Parce qu'il affiche toutes les informations sur le produit, il n'y a pas de paramètre à recevoir // La couche de service doit appeler la méthode pour trouver toutes les données, obtenir le résultat et répondre à Client ProductService Service = new ProductiveService (); essayez {// selon le nombre de pages affichées et chaque page, obtenez des données de la liste des couchers de service <com.thc.domain.product> product = Service.FindProduct (Pageno, PageSize); String JSontring = JSONObject.tojSontring (produit); // écrivez dans le navigateur Response.getWriter (). WRITE (JSONSTRING); } catch (sqlexception e) {e.printStackTrace (); }} Protected void doGet (HttpServLetRequest Request, HttpServletResponse Response) lève ServletException, ioException {doPost (request, réponse); }}Nouvelle méthode pour trouver des données de page actuelles ajoutées dans la couche de service
Public List <Rudding> findProduct (int pageno, int pagesize) lève SQException {ProductDao dao = new ProductDao (); List <product> product = dao.findProduct (pageno, pagesize); produit de retour; }La nouvelle méthode de recherche de la page actuelle de la base de données ajoutée dans la couche DAO
Public List <Rudding> FindProduct (int pageno, int pagesize) lève Sqlexception {queryRunner qr = new queryRunner (jdbcutils.getDataSource ()); String sql = "SELECT * FROM PRODUCT LIMIT? ,?"; // Limiter le premier paramètre: Commencez à partir de là où dans la base de données, l'index commence à partir de 0 // le deuxième paramètre: combien de vérifications à chaque fois // La règle du premier paramètre est: soustrayez le nombre actuel de pages par un, multipliez par le nombre de requêtes par liste de pages <Product. pagesize); return productList; }Le côté du navigateur s'affiche comme indiqué dans la figure ci-dessous: seules les informations sur le produit avec la taille de la pages (la valeur actuelle est 6) seront affichées à la fois.
Cependant, il n'est pas possible de tourner dynamiquement les pages en cliquant sur le bouton de la page.
Ensuite, nous devons considérer comment la page affiche la barre de pagination et comment les données doivent être encapsulées?
Nous savons que le nombre de pages affichées dans la barre de pagination de page est modifié dynamiquement . Le nombre total de pages = le nombre total de données / données affichées sur chaque page doit être arrondi vers le haut. En d'autres termes, en plus des données de la liste <produit>, notre page a également besoin du nombre total de données, du nombre total de pages, de la page en cours et du nombre d'affichages par page. De plus, le pageno sur la page actuelle change également dynamiquement. Combien de pages sont cliquées sur la page? Pageno est le nombre de Pageno. Par conséquent, nous devons créer un autre javabean (pagebean.java) pour encapsuler ces données, puis les convertir en données JSON et l'envoyer au client pour l'afficher.
Étape 4: encapsuler les données pertinentes de la page dans un JavaBean
Créez une classe nommée PageBean dans le package de domaine, avec les propriétés suivantes:
private int pageno; // numéro de page actuel private int pagesize; // le nombre de personnes affichées sur chaque page private int totalCount; // combien de données de produits de produit y a-t-il dans total int private totalpage; // combien de pages de données y a-t-il dans la liste privée totale <produit> produits; // ensemble de données d'informations sur le produit
Passez le nombre actuel de pages (Pageno) dans la couche de service et le nombre de pages affichées sur chaque page (Pagesize) et renvoyez une pageBean à la couche Web.
Le code final de la couche Web est le suivant
Le produit de classe publique étend httpServlet {protected void doPost (httpServLetRequest request, httpservletResponse réponse) lève Servlexception, ioException {// gère le code brouillé request.SetcharAtterencoding ("utf-8"); Response.SetContentType ("Text / HTML; charSet = UTF-8"); // la page actuelle int pageno = Integer.ParseInt (request.getParameter ("pageno")); // le nombre d'entrées affichées par page int pagesize = Integer.ParseInt (request.getParameter ("pagesize")); // Parce qu'il affiche toutes les informations sur le produit, il n'y a pas de paramètre à recevoir // La couche de service doit appeler la méthode pour trouver toutes les données, obtenir le résultat et répondre à Client ProductService Service = new ProductiveService (); essayez {/ * appelez la méthode de la couche commerciale pour obtenir toutes les listes de produits <com.thc.domain.product> allprouct = service.findallProuct (); Convertir les données obtenues en chaîne de données de type JSON jsonstring = jsonObject.tojSontring (allProuct); * / // récupérer les données de la couche de service en fonction de la page actuelle et du numéro affiché sur chaque page // list <com.thc.domain.product> product = service.FindProduct (pagen, pagesize); // ========================================================================================= PageBean); // ==========================================================================. ===============================================================================. ===============================================================================. ===============================================================================. jsonstring = jsonObject.tojSontring (pageBean); // =========================================================================================. } catch (sqlexception e) {e.printStackTrace (); }} Protected void doGet (HttpServLetRequest Request, HttpServletResponse Response) lève ServletException, ioException {doPost (request, réponse); }}Dans le service, vous devez obtenir toutes les informations du PageBean, et Pageno et PageSize sont connus. Vous devez obtenir les données d'informations sur le produit et la collecte de répertoires à partir de la couche DAO, et vous devez également obtenir le total des données du produit TotalCount. Combien de pages peut être divisée par le total des données par les données affichées sur chaque page et arrondies vers le haut.
Le code final de la couche de service est le suivant:
classe publique ProductsService {// Dans la couche de service, obtenez des données à partir de la couche DAO et renvoyez les données à la couche Web // ================================== Liste publique <Product> FindallProuct (); // Appel de la couche DAO pour interroger tous les produits List <Dudce> AllProduct = dao.FindallProduct (); retourner allproduct; } // =============================================================================================================. ProductDao (); List <product> product = dao.findProduct (pageno, pagesize); produit de retour; } // ===============================================================================================================. ProductDao (); List <product> product = dao.findProduct (pageno, pagesize); int totalCount = dao.FindTotalCount (); PageBean PB = new PageBean (); // encapsuler les données pb.setTotalCount (totalCount); pb.setpageno (pageno); PB.SetPageSize (PageSize); pb.setProducts (produit); // de plus et calculez le nombre total de pages. N'oubliez pas de se multiplier par 1.0, sinon une page de données manquera dans TotalPage = (int) math.ceil (totalCount * 1.0 / pagesize); pb.setTotalPage (TotalPage); // Donne les données au servlet Retour PB; }}Dans la couche DAO, une nouvelle méthode est ajoutée pour interroger le nombre total d'informations sur la base de données.
Le code final de la couche DAO est le suivant
// ===========================. nouveau queryRunner (jdbcutils.getDataSource ()); // Écrivez des instructions SQL pour interroger tous les produits String SQL = "SELECT * dans le produit"; // convertit le produit en collection de liste, et le générique en produit est la liste de produits <product> products = qr.query (sql, new Beanlisthandler <> (product.class)); produits de retour; } // ============================================. String sql = "SELECT * FROM PRODUCT LIMIT? ,?"; // Limite le premier paramètre: par où démarrer dans la base de données, l'index commence à partir de 0 // le deuxième paramètre: combien de chaque fois que vous vérifiez // la règle du premier paramètre est: Soustraire le nombre actuel de pages par une, multiplier par le nombre de requêtes par liste de pages <Product. pagesize); return productList; } // ============== Combien de données y a-t-il dans la requête? ==========================. String sql = "SELECT COUNT (*) FROM PRODUIT"; Long countl = (long) qr.query (sql, new ScalarHandler ()); return countl.intValue (); }}
Étape 5: Traitez la page frontale
Sous l'étiquette de table, ajoutez une ligne pour fournir le composant de pagination. Commentez le code Li car il doit être affiché dynamiquement.
Déclarez les variables des paramètres à recevoir en premier
var url = "/ ajax_product / produit"; var pageno = 1; // La page actuelle est définie sur 1var pagesize = 6; // sur chaque page affiche 6 informations de produit var totalpage; // combien de pages de données y a-t-il dans les produits var totaux; // les informations sur les données du produit
Après avoir écrit la demande de publication pour AJAX, la capture de paquets teste si le navigateur reçoit des données.
$ .post (URL, // L'adresse des données transmises au serveur {"Pageno": Pageno, "PageSize": PageSize}, // Le nombre actuel de pages et le nombre de pièces affichées par page fonction (données) {})J'ai obtenu les données suivantes après avoir attrapé le paquet
{"Pageno": 1, "PageSize": 6, "Products": [{"Count": 100, "Id": 1, "Name": "TV", "Price": 2000}, {"Count": 200, "Id": 2, "Name": "Washing Machine", "Price": "AIR Conditionneur "," Price ": 3000}, {" Count ": 50," ID ": 4," Name ":" Projecteur "," Price ": 2000}, {" Count ": 1000," ID ": 5," Name ":" HP Computer "," Price ": 4000}, {" Count ": 100," Id ":" Name ":" Apple Phone "," Prix ": 5}] "TotalCount": 22, "Totalpage": 3}Cela signifie que le côté serveur peut répondre normalement au navigateur. Ensuite, écrivez le code frontal
Afficher les données dans le tableau
D'abord l'analyse des données obtenues par le backend, puis les synchroniser dans le code JS, obtenir un tableau de données de tous les objets de produit via PageBean.Products, puis itérez dans ce tableau et épissez la valeur de l'attribut de produit dans le tableau.
Le code est le suivant
$ .post (URL, // L'adresse des données transmises au serveur {"Pageno": Pageno, "PageSize": PageSize}, // Le nombre actuel de pages et le nombre de pièces affichées par page sont transmises à la fonction de navigateur (données) {// Analyser toutes les données PageBean transmises à partir du serveur, le format est json Type PageBan = evory); pageno = pageBean.Pageno; ==============================================================================================================. ==============================================================================================================. ==============================================================================================================. ==============================================================================================================. pour (var i = 0; i <productS.length; i ++) {// transfert data var protd = $ ("<tr> <td>" + produits [i] .id + "</td> <td>" + produits [i] .name + "</td> <td>" + produits [i] .Count + "</td> <td>" + produits [i]. </ tr> "); // Ajouter au tableau, ajouter des données au tableau $ (" # onglet "). APPEND (protd);}}," JSON ")Après avoir écrit ce code, le serveur peut être activé pour tester si les données peuvent être obtenues dans le tableau. Les données sont affichées avec succès après le test.
Afficher les données de la barre de page
Affichez d'abord les données de la page précédente et de la page suivante
// Affichez les données de la barre de page // sans tenir compte de la fonction, elle peut être affichée d'abord // affiche la page précédente var preli = $ ('<li> <a href = "#" rel = "external nofollow" rel = "external nofollo Page </a> </li> '); // ajouter $ (". Pager"). APPEND (Preli); // affiche la page suivante var nextli = $ (' <li> <a href = "#" rel = "external nofollow" rel = "external nofollow nofollow "> page suivante </a> </li> '); // ajouter $ (". Pager "). APPEND (nextli);Les résultats des tests sont les suivants:
Afficher les données du numéro de page:
//Show the data of the page bar//Not considering the function, it can be displayed first//Show the previous page var preLi=$('<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow "> page précédente </a> </li> '); // ajouter $ (". Pager "). Ajouter (préli); // voyager sur le numéro de page pour (var i = 1; i <= totalpage; i ++) {// créer Li tag var li = $ (' <li> <a href =" # "rel =" external nofollow "rdel =" external nofoll = "external nofollow" rdel = "external nofoll =" external nofollow "rdel =" external nofoll = "external nofollow" rose = "externe" nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "> '+ i +' </a> </li> '); //Add to ul through the class selector $(".pager").append(li);}//Show the next page var nextLi=$('<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel = "externe nofollow" rel = "externe nofollow"> page suivante </a> </li> '); // ajouter $ (". pager"). APPEND (nextli);L'effet est illustré dans la figure ci-dessous:
La page actuelle est mise en évidence
Étant donné que la classe Pager ne prend pas en charge la mise en évidence dans Bootstrap, la classe de pagination est remplacée par une pagination.
La logique de la mise en évidence est de déterminer s'il s'agit de la page actuelle (Pageno) lors de la traversée.
Ajouter l'attribut actif de la classe à la balise Li
// transférer le numéro de page pour (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> '); // Ajouter à UL via le sélecteur de classe $ (". Pagination"). Ajouter (li); } else {// ============ La page actuelle, ne mette pas en surbrillance li = $ ('<li> <a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" external " > '+ i +' </a> </li> '); // Ajouter à UL via le sélecteur de classe $ (". Pagination"). Ajouter (li); }}L'effet est le suivant
Ajoutez des événements cliquez sur le numéro de page et changez les données.
Aucun événement de clic n'est requis sur la page actuelle
Ajoutez un événement onClick à la balise A dans le nombre de pages et liez une fonction skippage (). L'opération dans la fonction skippage () est en fait le fonctionnement de l'envoi de la demande de post ajax au serveur lorsque nous obtenons les données de la première page. Par conséquent, copiez le code de $ (function () {}) dans la fonction skippage () , puis appelez la fonction skippage () lorsque la page se charge. Le passage 1 signifie que les données de la page 1 sont chargées par défaut. À l'heure actuelle, $ (function () {}) ne sera exécuté qu'une seule fois. Skippage () devient une fonction récursive et s'appelle. Cependant, un événement de clic unique n'appellera la méthode Skippage qu'une seule fois, ce qui est différent de la récursivité en Java.
Après avoir exécuté ce code, cliquez sur différents codes et constatez que le contenu de la table et de la barre de page sera superposé en continu.
Comme indiqué dans la figure ci-dessous:
Effacer les données à chaque fois que les données sont chargées. Effacer la barre de page
Après avoir ajouté le code pour effacer la barre de page, j'ai constaté que la barre de page n'a pas été superposée, mais le tableau est toujours superposé.
Effacer le formulaire
$("#tab").empty(); Après avoir exécuté le code clair pour le tableau, j'ai trouvé le phénomène suivant:
La première ligne de la table a disparu, vous devez donc utiliser un sélecteur pour exclure la première ligne.
$ ("# tab tr: pas (: premier)") signifie
Sélectionnez d'abord le tableau en fonction du sélecteur d'ID
Ensuite, à partir du sélecteur hiérarchique, sélectionnez la ligne TR
Le sélecteur de base est d'abord imbriqué dans le sélecteur de base non, ce qui signifie que ce n'est pas la première ligne
La signification globale est que si le tableau n'est pas la première ligne, la méthode vide () est appelée pour supprimer tous les nœuds enfants dans la collection d'éléments correspondante.
Après les tests, la première ligne de données peut être supprimée
Déterminez s'il est disponible sur la page précédente et la fonction des numéros de page de commutation
Si la page actuelle est la première page, la fonction de page précédente n'est pas disponible.
Si la page actuelle n'est pas la première page, ajoutez un événement de clic, passez à la page précédente et réduisez le numéro de page par un.
// Affichez la page précédente et déterminez si Var Preli est disponible; if (pageno === 1) {// Si la page actuelle est la première page, la fonction de la page précédente n'est pas disponible préli = $ ('<li> <a href = "javascrip nofollow "rel =" external nofollow "rel =" externe nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" externe nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollo nofollow "rel =" external nofollow "rel =" externe 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 Page </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" wofollo rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" onclick = "skippage ('+ (pageno-1) +')"> page précédente </a> </li> ');} // utilisez le sélecteur de classe, ajouter $ (". Pagination"). Annex (préli);Déterminez s'il est disponible sur la page suivante et la fonction de numéros de page de commutation
Si la page actuelle est la dernière page, la fonction de page précédente n'est pas disponible.
Si la page actuelle n'est pas la dernière page, ajoutez un événement de clic, passez à la page suivante et ajoutez un numéro de page.
// Affichez la page suivante et déterminez si Var Nextli est disponible; if (pageno === TotalPage) {// Si la page actuelle est la dernière page, la fonction de la page précédente n'est pas disponible. NextLi = $ ('<li> <a href = "javascript: void (0)" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollo rel = "externe nofollow" rel = "externe nofollow" rel = "externe nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollo nofollow "rel =" external nofollow "rel =" externe nofollow "rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "rel =" externe 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 nofold" rel = "external no> page suivante </a> </li> ');} else {// si la page actuelle n'est pas la page de la dernière page, ajout de la page, ajout à l'événement, à l'événement, à l'événement, à l'événement, à l'événement, Page, et réduisez le numéro de page par un. 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>Résumer
此分页功能,用到了JavaEE的三层架构的思想.每一层各司其职,做各自的负责的事情.前端部分为难点.需要处理的细节很多.前端涉及到了ajax和jquery.jQuery的一些语法与选择器的相关的东西要非常熟练.还用到了bootrap响应式开发,让前端页面的布局更加方便.
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.