Javaee Dreischichtarchitektur implementiert eine Ajax-Pagination-Abfrage
Entwicklungsumgebung:
Schritt 1: Vorbereitung der Codeimplementierung
Es gibt viele Beiträge im Internet bei der Entwicklung der vorläufigen Konfigurationsarbeit in der Idee, sodass ich sie hier nicht wiederholen werde. Ich spreche hauptsächlich über drei Punkte.
In der Serverkonfiguration müssen Sie Aktualisierungsklassen und Ressourcen für die beiden Elemente im roten Feld auswählen. Nach der Auswahl können Sie einen heißen Einsatz erreichen.
Um den Namen des Projekts hier auszufüllen. Als Wurzelweg des Projekts
Der Weg zum Importieren des JAR -Pakets ist in der Abbildung dargestellt. Klicken Sie in Abhängigkeit auf die Plus -Anzeichen und wählen Sie den von Ihnen erstellten Lib -Ordner aus.
Import verwandte JAR -Pakete: C3P0 JAR -Paket, DButils Tool Class JAR -Paket, Fastjson Jar -Paket, MySQL -Treiber -Jar -Paket
Schreiben Sie die folgenden Daten in die Produkttabelle von Database test03
Subkontrahieren des Projekts in der Idee und zum Importieren der C3P0 -Konfiguration des Verbindungspools
Beachten Sie, dass die C3P0 -Konfigurationsdatei in ihren eigenen Datenbanknamen und Datenbankkennwort geändert werden sollte
Erstellen Sie im Domänenpaket die Produktentitätsklasse, schreiben Sie die entsprechenden Eigenschaften in der Produktklasse basierend auf den Feldern der Produkttabelle in der Datenbank. Generieren Sie die Get -Set -Methode.
Erstellen Sie eine Werkzeugklasse, um Verbindungspool -Objekte abzurufen
Schritt 2: Fragen Sie alle Produktinformationen ohne Paging ab
Implementierungsideen:
JSP/HTML ------> Servlet (Web-Layer-Anforderungen und Antwortdaten) ---------------------------------------------------------------------------------------------------------------------------------------------------
Erstellen Sie eine Produktseite und senden Sie eine Anforderung an den Server (holen Sie sich alle Produktinformationen).
Das Front-End verwendet Bootstrap Responsive Development, die die Seite schöner machen und die Entwicklung bequemer ist.
Der Code für die Seiteninformationen lautet wie folgt:
<! DocType html> <html Lang = "en"> <pead> <meta charset = "utf-8"> <title> Produktanzeigeliste </title> <!-stootstrap-bezogene Dateien einführen-> <link rel = "styleSheet" href = "/ajax_product/bootstrap/css/csSs/csSs/csSs/csSs/csSs/csSs/bootStrap.CsSs" 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 Typ = "text/javaScript"> // Wenn die Seite geladen wird, wird eine Anforderung an den Server gesendet, um alle Produktdaten $ (function () {zu empfangen //========================================================================================================= ==================================================================ieben ==================================================================ieben ==================================================================ieben // Alle Daten analysieren, die aus dem Server übertragen werden // ====================================================== Die Produktinformationen an der Tabelle var products (data); var protd = $ ("<tr> <td>"+Produkte [i] .ID+"</td> <td>"+Produkte [i] .Name+"</td> <td>"+Produkte [i] .Count+"</td> <td>"+Produkte [i] .Price+"</td> </tr>"). $ ("#tab"). Append (protd); id = "tab"> <tr> <Th> Nummer </th> <Th> Produktname </th> <Th> Menge </th> <Th> Produktmenge </th> <Th> Produkteinheit Preis </th> </tr> </table> </div> </div> </div> </body> </html> </table> </div> </div> </body> </html> </div> </div> </body> </html> </div> </div> </body> </html> </div> </div> </body> </html>Erstellen Sie ein Servlet, um Anfragen zu erhalten und alle Produktinformationen zu erhalten
Erstellen Sie in der Idee ein Servlet, wie in der folgenden Abbildung gezeigt
Generieren Sie automatisch Annotationen, ohne hier zu überprüfen
Nachdem Sie auf OK geklickt haben, springt die Idee automatisch in die Datei web.xml und schreibt automatisch den vollständigen Pfadnamen des Servlets. Schreiben Sie einfach das URL-Muster.
Beachten Sie, dass das URL-Muster im Einklang mit dem Servlet in der AJAX-Anfrage geschrieben werden muss.
Der Code des Web -Layer -Servlets lautet wie folgt:
Paket com.thc.web; import com.alibaba.fastjson.jsonObject; import com.thc.service.productservice; import javax.servlet.servletException; import Javax.servlet.http.httpervlet; import Javax.servlet.http.http.http.http.http.http.http. javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.sql.SQLException;import java.util.List;public class Product extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // Handle Befragte CODE-Anforderung. Antwort.SetContentType ("text/html; charSet = utf-8"); // Da alle Produktinformationen angezeigt werden, gibt es keinen Parameter, der empfangen wird // Die Serviceschicht muss die Methode aufrufen, um alle Daten zu finden, das Ergebnis zu erzielen und auf den Client ProductService Service = New Productsservice () zu reagieren. Versuchen Sie {// Rufen Sie die Methoden der Geschäftsschicht an, um alle Produktliste <com.thc.domain.product> alleprouct = service.findallprouct () zu erhalten; // Die erhaltenen Daten in JSON -Typ -Datenzeichenfolge JSonstring = jsonObject.tojonstring (AllProuct) konvertieren; // Schreiben Sie an die Browser -Antwort zurück. } catch (sqlexception e) {e.printstacktrace (); }} Protected void dagget (httpServletRequest -Anforderung, httpServletResponse -Antwort) löst ServletException aus, IoException {Dopost (Request, Antwort); }}Rufen Sie in der Serviceschicht Daten aus der DAO -Ebene ab und geben Sie sie in das Servlet in der Webschicht zurück
Der Code zum Aufrufen der Serviceebene in der Webschicht ist wie folgt
Paket com.thc.service; import com.thc.dao.productdao; import com.thc.domain.product; import Java.sql.sqlexception; importieren Sie Java.util.list; öffentliche Klasse productService {// In den Serviceschichten, die Daten aus dem DAO -Schicht erhalten. = new ProductDao (); // Die DAO -Ebene anrufen, um alle Produkte zu fragen. Geben Sie alle Produkte zurück; }}Abfragen Sie Daten vom Server in der DAO -Ebene ab und geben Sie die Serviceschicht an
Paket com.thc.dao; import com.thc.domain.product; import com.thc.utils.jdbcutils; import org.apache.commons.dbutils.queryrunner; import org.apache java.util.list; // ==================================== Die DAO -Schicht ist speziell für Datenbankoperationen verantwortlich für die öffentliche Klasse ProductDao {// ================ QUSPUSPUSPUS. DBUTILS zum Erstellen des QueryRunner Core -Objekts QueryRunner QR = New QueryRunner (jdbcutils.getDataSource ()); // Schreiben Sie die SQL -Anweisung, um alle Produkte String sql = "aus dem Produkt auszuwählen" abfragen; // das Produkt in das Produkt in eine Listensammlung umwandeln, und die generische Produktliste <produkte> products = qr.Query (SQL, New Beanlistandhandler <> (product.class)); Produkte zurückgeben; }}Nachdem die DAO -Ebene die Daten erhalten hat, übergeben sie sie an die Serviceschicht. Die Serviceschicht übergibt sie dann an den Servlet der Webschicht. Nachdem das Servlet die Daten erhalten hat, wird sie in der Listensammlung gespeichert und die Listensammlung dann in einen JSON -Datentyp umwandelt und in den Browser schreibt. Der folgende Code auf der Front-End-Seite besteht darin, die vom Servlet zurückgegebenen JSON-Daten zu analysieren
$ .post (URL, Funktion (Daten) {// analysieren Sie alle Daten, die aus dem übertragen werden Server // ======================================================= =================================================================== ================================================================= =================================================================== ================================================================= =================================================================== ================================================================= =================================================================== und in die Tabelle hinzufügen, Daten in die Tabelle $ ("#tab") hinzugefügt (protd);Über das von Google Chrome bereitgestellte Paket -Grabber -Tool können Sie die Daten der Servlet -Antwort sehen
Kopieren Sie alle Antwortdaten, die die folgenden Daten sind. Ein Array hat das Produktobjekt verschachtelt.
In Form von Schlüsselwertpaaren existieren alle Objekte.
Beispielsweise ist der Schlüssel in den ersten Daten die Anzahl und der Wert 100. Der Schlüssel ist ID, der Wert ist 1, der Schlüssel ist Name, der Wert ist TV, der Schlüssel ist der Preis, der Wert ist 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,"name":"Projector","price":2000}, {"count":1000,"id":5,"name":"HP computer","price":4000}, {"count":100,"id":6,"name":"Apple phone","price":5000}, {"count":60,"id":7,"name":"sewing machine","price":2000}, {"count":100,"id":8,"name":"Xiaomi Box","price":2200}, {"count":300,"id":9,"name":"Dispenser","price":2000}, {"count": 200, "id": 10, "name": "waterreinig", "preis": 2000}, {"count": 500, "id": 11, "name": "elektrischer heizger {"count": 200, "id": 13, "name": "elektrisch macher", "preis": 498}, {"count": 300, "id": 14, "name": "rice cooker", "price": 299}, {"count {"count": 200, "id": 16, "name": "sojilchmilchhersteller", "preis": 199}, {"count": 300, "id": 17, "name": "induktkocher", "preis": 398}, {"count {"count":250,"id":19,"name":"Razor","price":98}, {"count":1000,"id":20,"name":"Safety","price":16.5}, {"count":1200,"id":21,"name":"Diapai","price":8.8}, {"count": 1500, "id": 22, "name": "libai", "preis": 9.9}]Ohne Pagination lautet der Anzeigeeffekt wie folgt:
Alle Daten werden in einer Seite angezeigt. Wenn beispielsweise viele Daten auf der Suche nach einem Schlüsselwort auf Baidu suchen, kann es Zehntausende oder Hunderte von Millionen von ihnen geben. Es dauert lange, um so viele Ergebnisse aus der Datenbank zu erzielen und dem Browser so viel zu geben. Die Benutzererfahrung ist extrem schlecht, daher ist Paging -Technologie erforderlich. Physische Paging wird verwendet.
Fragen Sie nur die für die aktuellen Seite erforderlichen Informationen aus der Datenbank gleichzeitig ab.
Schritt 3: Übergeben Sie die aktuelle Anzahl der Seiten und die Anzahl der auf dem Server angezeigten Seiten
Die HTML -Seite muss die aktuelle Anzahl der Seiten und die Anzahl der angezeigten Seiten pro Seite erhöhen und an den Server weitergeben
Ändern Sie den Code, wie in der folgenden Abbildung gezeigt:
In der Servlet -Ebene müssen Parameter empfangen werden und die entsprechenden Daten der aktuellen Seite werden von der Serviceschicht abgefragt. Der Code ist wie folgt:
Das Produkt der öffentlichen Klasse erweitert HttpServlet (geschützte void dopost (httpServletRequest-Anforderung, httpServletResponse-Antwort), die ServletException, IOException {// Kelselcodeanforderung verwandeln. Antwort.SetContentType ("text/html; charSet = utf-8"); // Die aktuelle Seite int pageno = integer.parseInt (request.getParameter ("pageno")); // die Anzahl der angezeigten Einträge pro Seite int pageSize = Integer.ParseInt (request.getParameter ("pageSize")); // Da alle Produktinformationen angezeigt werden, gibt es keinen Parameter, der empfangen wird // Die Serviceschicht muss die Methode aufrufen, um alle Daten zu finden, das Ergebnis zu erzielen und auf den Client ProductService Service = New Productsservice () zu reagieren. Versuchen Sie {// gemäß der Anzahl der angezeigten Seiten und auf jeder Seite erhalten Sie Daten aus der Liste der Service -Layer -Liste <com.thc.domain.product> product = Service.findProduct (pageno, pageSize); String jSonstring = jsonObject.tojonstring (Produkt); // Schreiben Sie an die Browser -Antwort zurück. } catch (sqlexception e) {e.printstacktrace (); }} Protected void dagget (httpServletRequest -Anforderung, httpServletResponse -Antwort) löst ServletException aus, IoException {Dopost (Request, Antwort); }}Neue Methode zum Auffinden aktueller Seitendaten in der Serviceschicht hinzugefügt
public list <produkt> findProduct (int pageno, int pageSize) löst SQLEXception {productDao dao = new productDao () aus; LIST <produkt> product = dao.findProduct (pageno, pageSize); Rückgabeprodukt; }Die neue Methode, um die aktuelle Seite aus der in der DAO -Ebene hinzugefügten Datenbank zu finden
public list <produkt> findProduct (int pageno, int pageSize) löst SQLEXception {queryRunner qr = new queryRunner (jdbcutils.getDataSource ()) aus; String SQL = "Ausgewählte * aus Produktlimit?,?"; // Begrenzen Sie den ersten Parameter: Beginnen Sie von der Where in der Datenbank, der Index startet mit 0 // den zweiten Parameter: Wie viele Überprüfungen jedes Mal // Die Regel des ersten Parameters lautet: Subtrahieren Sie die aktuelle Anzahl der Seiten mit einem Multiplizieren mit der Anzahl der Abfragen pro Seite. pagesze); Produktliste zurückgeben; }Die Browser -Seite wird wie in der Abbildung unten gezeigt angezeigt: Nur Produktinformationen mit PageSize (der aktuelle Wert ist 6) werden gleich angezeigt.
Es ist jedoch nicht möglich, Seiten dynamisch zu drehen, indem Sie auf die Schaltfläche Seite klicken.
Dann müssen wir überlegen, wie die Seite die Paging -Leiste anzeigt und wie die Daten eingekapselt werden sollten?
Wir wissen, dass die Anzahl der Seiten, die in der Paging -Leiste angezeigt werden, dynamisch verändert wird . Die Gesamtzahl der Seiten = Die Gesamtzahl der auf jeder Seite angezeigten Daten/Daten sollte nach oben abgerundet werden. Mit anderen Worten, zusätzlich zu den List <Produkt> -Daten benötigt unsere Seite auch die Gesamtzahl der Daten, die Gesamtzahl der Seiten, die aktuelle Seite und die Anzahl der Anzeigen pro Seite. Darüber hinaus ändert sich auch das Pageno auf der aktuellen Seite dynamisch. Wie viele Seiten werden auf der Seite geklickt? Pageno ist die Anzahl von Pageno. Daher müssen wir ein anderes Javaban (pagebean.java) erstellen, um diese Daten zu verkapulieren, und sie dann in JSON -Daten umwandeln und an den Client senden, um sie anzuzeigen.
Schritt 4: In einem Javabäer die relevanten Daten der Seite in Einklang bringen
Erstellen Sie eine Klasse mit dem Namen PageBohnen im Domain -Paket mit den folgenden Eigenschaften:
private int pageno; // aktuelle Seitenzahl private int pageSize; // Die Anzahl der auf jeder Seite angezeigten privaten Int TotalCount; // Wie viele Produktinformationsdaten gibt es in der gesamten privaten Int TotalPage; // Wie viele Datenstellen enthalten in der gesamten privaten Liste <produkte> Produkte; // Satz von Produktinformationsdaten
Geben Sie die aktuelle Anzahl der Seiten (Pageno) in der Serviceschicht und die Anzahl der auf jeder Seite angezeigten Seiten (pagessize) und geben Sie eine Seitenbekleidung in die Webschicht zurück.
Der endgültige Code der Webschicht ist wie folgt
Das Produkt der öffentlichen Klasse erweitert HttpServlet (geschützte void dopost (httpServletRequest-Anforderung, httpServletResponse-Antwort), die ServletException, IOException {// Kelselcodeanforderung verwandeln. Antwort.SetContentType ("text/html; charSet = utf-8"); // Die aktuelle Seite int pageno = integer.parseInt (request.getParameter ("pageno")); // die Anzahl der angezeigten Einträge pro Seite int pageSize = Integer.ParseInt (request.getParameter ("pageSize")); // Da alle Produktinformationen angezeigt werden, gibt es keinen Parameter, der empfangen wird // Die Serviceschicht muss die Methode aufrufen, um alle Daten zu finden, das Ergebnis zu erzielen und auf den Client ProductService Service = New Productsservice () zu reagieren. Versuchen Sie { /* rufen Sie die Business Layer -Methode auf, um alle Produkte zu erhalten. Konvertieren Sie die erhaltenen Daten in JSON -Typ -Datenzeichenfolge JSonstring = jsonObject.tojonstring (AllProuct);*/// Daten aus der Serviceschicht basierend auf der aktuellen Seite und der Nummer auf jeder Seite // list <Com.thc.domain.Product> product = service.findproduct (pageno, vagessize); //======================================================================== PageBean pageBean = service.findPageInfo(pageNo, pageSize); // ==================================================================== ======================================================================= ======================================================================= ======================================================================= JSonstring = jsonObject.tojonstring (PageBohnen); // =====================================================================.Getwriter (). } catch (sqlexception e) {e.printstacktrace (); }} Protected void dagget (httpServletRequest -Anforderung, httpServletResponse -Antwort) löst ServletException aus, IoException {Dopost (Request, Antwort); }}Im Dienst müssen Sie alle Informationen der Seitenbekleidung erhalten, und Pageno und PageSize sind bekannt. Sie müssen die Produktinformationsdaten abrufen und die Sammlung der DAO -Ebene auflisten. Sie müssen auch die Gesamtdaten für Produktinformationen erhalten. Wie viele Seiten können durch die Gesamtdaten durch die auf jeder Seite angezeigten Daten geteilt und nach oben abgerundet werden.
Der endgültige Code der Serviceschicht lautet wie folgt:
öffentliche Klasse ProductService {// In der Serviceschicht erhalten Sie Daten aus der DAO -Ebene und senden Sie die Daten in die Webschicht // ========================================================================== Product> findAlprouct () löst SQLEXCECTION {productDao dao = new productdao (). // Die DAO -Ebene anrufen, um alle Produkte zu fragen. Geben Sie alle Produkte zurück; } // ======================================ieben Productdao (); LIST <produkt> product = dao.findProduct (pageno, pageSize); Rückgabeprodukt; } // ======================================================anden Productdao (); LIST <produkt> product = dao.findProduct (pageno, pageSize); int totalCount = dao.findtotalCount (); PageBean pb = new PageBean (); // data pb.settotalcount (TotalCount) zusammenfassen; pb.setpageno (pageno); pb.setPageSize (pageSize); PB.SetProducts (Produkt); // von oben und berechnen Sie die Gesamtzahl der Seiten. Vergessen Sie nicht, sich mit 1.0 zu multiplizieren. Andernfalls fehlt eine Datenseite int TotalPage = (int) math.ceil (TotalCount*1.0/pageSize); pb.settotalpage (Gesamtpage); // Geben Sie die Daten an das Servlet Return PB; }}In der DAO -Ebene wird eine neue Methode hinzugefügt, um die Gesamtzahl der Datenbankinformationen abzufragen.
Der endgültige Code der DAO -Schicht ist wie folgt
// ============================= Die DAO -Schicht ist speziell für Datenbankoperationen verantwortlich, öffentliche Klasse productDao {// =========== Abfrage alle Produktinformationen öffentliche Liste <produkt> FindAllProducukt () throws sqlexception {//// // verwenden DButils, um das Mantel zu kreieren. QueryRunner (jdbcutils.getDataSource ()); // SQL -Anweisungen schreiben, um alle Produkte String sql = "aus dem Produkt auszuwählen"; // Das Produkt in die Listensammlung umwandeln, und das Generikum in das Produkt ist Produktliste <produkte> products = qr.Query (SQL, neuer Beanlistandhandler <> (product.class)); Produkte zurückgeben; } // ==================================ieben String SQL = "Ausgewählte * aus Produktlimit?,?"; // Begrenzen Sie den ersten Parameter: Wenn Sie in der Datenbank beginnen, beginnt der Index mit 0 // den zweiten Parameter: Wie viele, wenn Sie jedes Mal überprüfen // Die Regel des ersten Parameters lautet: Subtrahieren Sie die aktuelle Anzahl der Seiten mit einem Multiplizieren mit der Anzahl der Abfragen pro Seite. pagesze); Produktliste zurückgeben; } // ============= Wie viele Daten sind in der Abfrage? ============================= public int findTotAlcount () löst SQLEXception aus {queryRunner qr = new queryRunner (jdbcutils.getDataSource ()); String SQL = "Wählen Sie Graf (*) aus dem Produkt"; Long Countl = (lang) qr.Query (SQL, New ScalarHandler ()); return countl.intValue (); }}Schritt 5: Verarbeiten Sie die Front-End-Seite
Fügen Sie unter dem Tabellen -Tag eine Zeile hinzu, um die Paging -Komponente bereitzustellen. Kommentieren Sie den Li -Code, da er dynamisch angezeigt werden muss.
Deklarieren Sie die Parametervariablen zuerst, um zuerst zu empfangen
var url = "/ajax_product/produkt"; var pageno = 1; // Die aktuelle Seite ist auf 1Var pageSize = 6; // auf jeder Seite angezeigt 6 Produktinformationen Var Totalpage
Nach dem Schreiben der Post -Anfrage für AJAX testet der Paketerfassung, ob der Browser Daten erhält.
$ .post (URL, // Die Adresse der Daten, die an den Server übertragen werden {"pageno": pageno, "pageSize": pageSize}, // Die aktuelle Anzahl der Seiten und die Anzahl der pro Seitenfunktion angezeigten Stücke (Daten) {})Ich habe die folgenden Daten bekommen, nachdem ich das Paket gefangen hatte
{"pageNo":1, "pageSize":6, "products":[{"count":100,"id":1,"name":"TV","price":2000}, {"count":200,"id":2,"name":"washing machine","price":1000}, {"count":300,"id":3,"name":"Air Conditioner "," Preis ": 3000}, {" count ": 50," id ": 4," name ":" projector "," price ": 2000}, {" count ": 1000," id ": 5," name ":" hp computer "," preis ": 4000}," count "TotalCount": 22, "TotalPage": 3}Dies bedeutet, dass die Serverseite normalerweise auf den Browser reagieren kann. Schreiben Sie dann den Front-End-Code
Daten in der Tabelle anzeigen
Nehmen Sie zuerst die vom Backend erhaltenen Daten an, synchronisieren Sie sie dann in den JS -Code, erhalten Sie ein Array von Daten aller Produktobjekte über PageBohnen.produkte, dann durch dieses Array und spleißen Sie den Wert des Produktattributs in die Tabelle.
Der Code ist wie folgt
$ .post (URL, // die Adresse von Daten, die an den Server übertragen werden {"pageno": pageno, "pageSize": pageSize}, // Die aktuelle Anzahl der Seiten und die Anzahl der pro Seite angezeigten Teile sind auf die Seite "Daten). pageno = pagebean.pageno; ===============================================================================ieben ===============================================================================ieben ===============================================================================ieben ===============================================================================ieben für (var i = 0; i <products.length; i ++) {// Daten var protd = $ ("<tr> <td>"+produkte [i] .id+"</td> <td>"+produkte [i] .name+"</td> <td>"+Produkte [i]. </tr> "); // Hinzufügen zur Tabelle und fügen Sie Daten zur Tabelle $ ("#tab ") hinzu. Anhang (protd);}}," json ").Nach dem Schreiben dieses Code kann der Server eingeschaltet werden, um zu testen, ob die Daten in die Tabelle eingeholt werden können. Die Daten werden nach dem Test erfolgreich angezeigt.
Zeigen Sie die Daten der Seitenleiste an
Zeigen Sie zuerst die Daten der vorherigen Seite und der nächsten Seite an
// Zeigen Sie die Daten der Seitenleiste an // Nicht die Funktion berücksichtigen, sondern kann zuerst angezeigt werden // Die vorherige Seite var preli = $ ('<li> <a href = "#" rel = "externe nofollow" rel = "externe nofollow" rel = "externe noFoxoflo -rel =" externe nolowlowd "-Rel -" -Rowlow "-Regel -" -Regel -"-Regel -" -Regnowlown -"-Rowlowd" -Regwollowd ". page</a></li>');//Add $(".pager").append(preLi);//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" > Nächste Seite </a> </li> '); // $ (". Pager"). Append (nextli);Die Testergebnisse sind wie folgt:
Seitennummer Daten anzeigen:
//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 "> vorherige Seite </a> </li> '); // $ $ (". pager "). append (preli); // Reisen Sie über die Seitenzahl für (var i = 1; i <= TotalPage; i ++) {// li -tag var li = $ (' <li> <a href ="#"rel =" extern "extern" extern "extern" extern. " nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe 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 = "externer nofollow" rel = "external nofollow"> nächste Seite </a> </li> '); // $ (". Pager"). append (nextli);Der Effekt ist in der folgenden Abbildung dargestellt:
Die aktuelle Seite wird hervorgehoben
Da die Pager -Klasse in Bootstrap nicht unterstützt wird, wird die Paginierungsklasse durch Pagination ersetzt.
Die Logik des Hervorhebens besteht darin, zu bestimmen, ob es sich bei der aktuellen Seite (Pageno) beim Durchlaufen befindet.
Fügen Sie dem Li -Tag das aktive Attribut der Klasse hinzu
// die Seitenzahl für (var i = 1; i <= totalPage; i ++) {var li; if (i === pageno) {// =============== Es ist die aktuelle Seite. > '+i+' </a> </li> '); // ul zu ul über den Klassenauswählte $ (". Pagination"). Append (li); } else {// =========== nicht die aktuelle Seite, nicht hervorzuheben li = $ ('<li> <a href = "#" rel = "externe nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external noflox" extern "extern" extern "rel =" rel = "rel =" rel = "extern" extern "extern" extern "extern" extern "extern" extern "extern" extern "extern" extern "extern" extern "extern" extern "extern" extern "extern" extern "extern" extern "extern" extern "extern" extern "extern" extern "extern" extern "extern" extern "extern" extern "extern" extern "extern" extern "extern" extern "externe nowlow" " > '+i+' </a> </li> '); // ul zu ul über den Klassenauswählte $ (". Pagination"). Append (li); }}Der Effekt ist wie folgt
Klicken Sie auf die Seitennummer und wechseln Sie die Daten.
Auf der aktuellen Seite ist kein Klickereignis erforderlich
Fügen Sie dem A -Tag in der Anzahl der Seiten ein Onclick -Ereignis hinzu und binden Sie eine Skippage () -Funktion. Der Betrieb in der Funktion Skippage () ist tatsächlich der Betrieb des Sendens von AJAX -Postanforderung an den Server, wenn wir die ersten Seitendaten erhalten. Kopieren Sie daher den Code von $ (function () {}) in die Funktion Skippage () und rufen Sie dann die Funktion Skippage () auf, wenn die Seite geladen wird. 1 zu bestehen bedeutet, dass die Daten von Seite 1 standardmäßig geladen werden. Zu diesem Zeitpunkt wird $ (function () {}) nur einmal ausgeführt. Skippage () wird zu einer rekursiven Funktion und ruft sich selbst auf. Ein einzelnes Klickereignis ruft jedoch nur einmal die Skippage -Methode auf, die sich von der Rekursion in Java unterscheidet.
Klicken Sie nach der Ausführung dieses Codes auf verschiedene Codes und stellen Sie fest, dass der Inhalt der Tabelle und die Seitenleiste kontinuierlich überlagert wird.
Wie in der Abbildung unten gezeigt:
Löschen Sie die Daten jedes Mal, wenn die Daten geladen werden. Löschen Sie die Seitenleiste
Nachdem ich den Code hinzugefügt hatte, um die Seitenleiste zu löschen, stellte ich fest, dass die Seitenleiste nicht überlagert wurde, aber die Tabelle ist immer noch überlagert.
Löschen Sie die Form
$("#tab").empty(); Nachdem ich den klaren Code für die Tabelle ausgeführt hatte, fand ich das folgende Phänomen:
Die erste Zeile der Tabelle ist verschwunden, daher müssen Sie einen Selektor verwenden, um die erste Zeile auszuschließen.
$ ("#tab tr: nicht (: zuerst)") bedeutet
Wählen Sie zuerst die Tabelle gemäß dem ID -Selektor aus
Wählen Sie dann aus dem hierarchischen Selektor die TR -Reihe aus
Der grundlegende Selektor ist zuerst im Basiswählers verschachtelt, was bedeutet, dass es nicht die erste Zeile ist
Die Gesamtbedeutung ist, dass, wenn die Tabelle nicht die erste Zeile ist, die leere () -Methode aufgerufen wird, um alle untergeordneten Knoten in der Übereinstimmungselementsammlung zu löschen.
Nach dem Test kann die erste Datenzeile gelöscht werden
Bestimmen Sie, ob es auf der vorherigen Seite verfügbar ist, und die Funktion "Seitenzahlen für Schalter"
Wenn die aktuelle Seite die erste Seite ist, ist die bisherige Seitenfunktion nicht verfügbar.
Wenn die aktuelle Seite nicht die erste Seite ist, fügen Sie ein Klickereignis hinzu, wechseln Sie zur vorherigen Seite und reduzieren Sie die Seitennummer um eins.
// Zeigen Sie die vorherige Seite an und bestimmen Sie, ob Var Preli verfügbar ist. if (pageno === 1) {// Wenn die aktuelle Seite die erste Seite ist, ist die Funktion der vorherigen Seite nicht verfügbar. nofollow "rel =" externer nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" external nOfloOlow "rel =" externe nofolhole rel = "externe nowlow" rel = "extern nOlowfollowd" extern "extern" extern "extern" extern "extern. 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 =" externer nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" external nofollow "rel =" external nofold "rel =" externe nowlow "rel =" extern nOlowlowlowlowlown "extern" extern. 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" rel="external nofollow" rel = "externer nofollow" rel = "externe nofollow" rel = "externe nofollow" onclick = "Skippage ('+(pageno-1)+')"> vorherige Seite </a> </li> ');} // Verwenden Sie den Klassenauswahl, add $ (". Pagination"). append (preli);Bestimmen Sie, ob es auf der nächsten Seite verfügbar ist, und die Funktion "Seitenzahlen für Schalter"
Wenn die aktuelle Seite die letzte Seite ist, ist die bisherige Seitenfunktion nicht verfügbar.
Wenn die aktuelle Seite nicht die letzte Seite ist, fügen Sie ein Klickereignis hinzu, wechseln Sie zur nächsten Seite und fügen Sie eine Seitennummer hinzu.
// Die nächste Seite anzeigen und feststellen, ob Var Nextli verfügbar ist. if (pageno === TotalPage) {// Wenn die aktuelle Seite die letzte Seite ist, ist die Funktion der vorherigen Seite nicht verfügbar. 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 =" externer nofollow "rel =" externer nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" externe nofollow "rel =" external nOfloOlow "rel =" externe nofolhole rel = "externe nowlow" rel = "extern nOlowfollowd" extern "extern" extern "extern" extern "extern. rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external no >Next page</a></li>');}else { //If the current page is not the last page, add a click event, switch to the previous Seite und reduzieren Sie die Seitenzahl um eins. 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>Zusammenfassen
此分页功能,用到了JavaEE的三层架构的思想.每一层各司其职,做各自的负责的事情.前端部分为难点.需要处理的细节很多.前端涉及到了ajax和jquery.jQuery的一些语法与选择器的相关的东西要非常熟练.还用到了bootrap响应式开发,让前端页面的布局更加方便.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.