jQuery+Ajax zum Erreichen eines einfachen Paging-Effekts
|
In diesem Artikel wird der spezifische Code von jquery + Ajax zur Erzielung des Paging-Effekts zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt 1. Wenn es sich um eine JSP-Seite handelt, können Sie EL-Ausdrücke und JSTL-Tags verwenden, um einen Paging-Streifen zu erstellen, was nicht schwierig ist. Der Nachteil der Verwendung von EL-Ausdrücken und JSTL-Tags besteht darin, dass keine asynchronen Effekte erzielt werden können und die gesamte Seite aktualisiert wird. Zweitens können Sie bei normalen HTML-Seiten natürlich keine EL-Ausdrücke und JSTL-Tags verwenden. Derzeit ist die Implementierung nur über asynchrones Ajax möglich. Natürlich können beide Methoden für JSP-Seiten verwendet werden. 3. Paginierungsleiste, hier verwende ich Ajax und Jquery, um sie zu erstellen. Die Implementierung ist ziemlich kompliziert und der Code sehr lang, da eine Reihe von Zeichenfolgen verkettet werden müssen und anschließend die html()- oder append()-Methode zum Ändern des Dokumentinhalts verwendet wird. 4. Voranalyse Es gibt zwei Parameter, die der Browser an den Server senden muss: ①Die aktuelle Seitennummer currentPage; Der Server sendet Daten im JSON-Format an den Browser, bei dem es sich um eine Seitenentitätsklasse PageBean handelt. Die PageBean hat die folgenden Felder: ①Gesamtzahl der Datensätze totalCount; Diese PageBean unterstützt Generika, der Code lautet wie folgt:
öffentliche Klasse PageBean<T>
{
private int totalCount; // Gesamtzahl der Datensätzeprivate int totalPage; // Gesamtzahl der Seitenzahlenprivate List<T> list; // Daten pro Seiteprivate int currentPage; // Aktuelle Seitenzahlprivate int rows;//Anzahl der pro Seite angezeigten Datensätze, d. h. Seitengröße
öffentliche int getTotalCount()
{
gib Gesamtanzahl zurück;
}
öffentliche void setTotalCount(int totalCount)
{
dies.totalCount = Gesamtanzahl;
}
öffentliche int getTotalPage()
{
gib Gesamtseite zurück;
}
öffentliche void setTotalPage(int totalPage)
{
this.totalPage = Gesamtseite;
}
öffentliche Liste<T> getList()
{
Liste zurückgeben;
}
öffentliche void setList(Liste<T> Liste)
{
diese.liste = Liste;
}
öffentliche int getCurrentPage()
{
aktuelleSeite zurückgeben;
}
öffentliche void setCurrentPage(int aktuelleSeite)
{
diese.aktuelleSeite = aktuelleSeite;
}
öffentliche int getRows()
{
Zeilen zurückgeben;
}
öffentliche void setRows(int Zeilen) {
diese.Zeilen = Zeilen;
}
@Überschreiben
öffentliche Zeichenfolge toString()
{
return "PageBean{" +
"Gesamtzahl=" + Gesamtzahl +
", Gesamtseite=" + Gesamtseite +
", Liste=" + Liste +
", aktuelleSeite=" + aktuelleSeite +
", Zeilen=" + Zeilen +
'}';
}
}Um eine Paginierung zu erreichen, müssen Sie in der SQL-Anweisung das „Limit“ verwenden. Lassen Sie mich die Bedeutung anhand eines Beispiels verdeutlichen. Wählen Sie * ab Studentenlimit 2,5; Konkrete Bedeutung: Fragen Sie Daten aus der Studententabelle ab, beginnend mit dem Datensatz mit dem Index „2“, und fragen Sie danach 5 weitere Datensätze ab. Der Index beginnt bei 0, daher entspricht die obige Anweisung der Abfrage des 3., 4., 5., 6. und 7. Datensatzes, also insgesamt 5 Datensätzen. Kurz gesagt bedeutet die erste Zahl, „wo mit der Suche begonnen werden soll“, und die zweite Zahl bedeutet, „nach wie vielen Einträgen weiter gesucht werden soll“. Hier muss berechnet werden, „wo mit der Suche begonnen werden soll“. Die Formel lautet wie folgt: (aktuelleSeite-1)×Seitengröße Das heißt, die aktuelle Seitenzahl minus eins in Klammern, multipliziert mit der Seitengröße. Der Pseudocode der Abfrageanweisung lautet also wie folgt: Wählen Sie * aus dem Studentenlimit (aktuelleSeite-1) × Seitengröße, Seitengröße; Die Gesamtseitenzahl totalPage kann aus der Gesamtzahl der Datensätze totalCount und der Seitengröße pageSize berechnet werden. Der Code lautet wie folgt: Gesamtseite = Gesamtanzahl % Seitengröße == 0? Gesamtanzahl/Seitengröße: (Gesamtanzahl/Seitengröße +1); 5. Hauptcode auf der Serverseite
importiere com.fasterxml.jackson.databind.ObjectMapper;
Domäne.PageBean importieren;
Domäne importieren.RainFall;
importiere org.springframework.jdbc.core.BeanPropertyRowMapper;
importiere org.springframework.jdbc.core.JdbcTemplate;
importiere util.JDBCUtils;
importiere javax.servlet.ServletException;
importiere javax.servlet.annotation.WebServlet;
importiere javax.servlet.http.HttpServlet;
importiere javax.servlet.http.HttpServletRequest;
importiere javax.servlet.http.HttpServletResponse;
importiere java.io.IOException;
importiere java.util.List;
@WebServlet("/ViewRainByPageServlet")
öffentliche Klasse ViewRainByPageServlet erweitert HttpServlet
{
geschützt void doPost(HttpServletRequest Anfrage, HttpServletResponse Antwort) wirft ServletException, IOException
{
JdbcTemplate-Vorlage = neues JdbcTemplate (JDBCUtils.getDataSource());
String sql="select * from rain_fall limit ?,?";//Einige Tupel abfragen String sql2="select * from rain_fall";//Alle Tupel abfragen List<RainFall> countList = template.query(sql2, new BeanPropertyRowMapper<RainFall>(RainFall.class));
int totalCount = countList.size(); //Gesamtzahl der Datensätze aus der Datenbank abrufen int totalPage; //Deklariere zuerst die Gesamtseitenzahl, die anhand der vom Client gesendeten Daten berechnet werden muss String currentPage = request.getParameter("currentPage");
String Seitengröße = request.getParameter("Seitengröße");
int intCurrentPage = Integer.parseInt(currentPage); //Die vom Benutzer gesendete aktuelle Seitennummer if (intCurrentPage==0) //Wenn der Benutzer auf die Schaltfläche „Vorherige Seite“ klickt, wird currentPage um 1 reduziert und kann auf 0 reduziert werden {
intCurrentPage=1; //Wenn die currentPage des Benutzers=0 ist, setze die Seitenzahl direkt auf 1 und gib die erste Datenseite an den Client zurück}
int intPageSize = Integer.parseInt(pageSize); //vom Benutzer gesendete Seitengröße totalPage = totalCount% intPageSize == 0? totalCount / intPageSize: (totalCount / intPageSize + 1); //Gesamtseitenzahl berechnen if (intCurrentPage > totalPage) //wenn der Benutzer auf die Schaltfläche „Nächste Seite“ klickt, wird currentPage um 1 erhöht, was größer sein kann als die Gesamtseitenzahl {
intCurrentPage=totalPage; //Setze die aktuelle Seitenzahl auf die Gesamtzahl der Seiten}
int startIndex=(intCurrentPage-1)*intPageSize; //Ab welchem Datensatzindex soll die Abfrage beginnen?
Liste<RainFall> Liste = Vorlage.Abfrage(sql, neue BeanPropertyRowMapper<RainFall>(RainFall.class),StartIndex,IntPageSize);
ObjectMapper mapper=neuer ObjectMapper();
response.setContentType("application/json;charset=utf-8");//Antwortdatentyp und Zeichenkodierung festlegen PageBean<RainFall> pageBean=new PageBean<>();//PageBean-Objekt erstellen//PageBean-Objekt einkapseln pageBean.setTotalCount(totalCount);
pageBean.setTotalPage(gesamteSeite);
pageBean.setList(Liste);
pageBean.setCurrentPage(intCurrentPage);
pageBean.setRows(intPageSize);
//Daten zurück zum Client schreiben System.out.println(pageBean);
mapper.writeValue(response.getOutputStream(),pageBean);
}
geschützt void doGet(HttpServletRequest Anfrage, HttpServletResponse Antwort) wirft ServletException, IOException
{
this.doPost(Anfrage, Antwort);
}
}6. Front-End-Code (sehr lang)
<%--
Erstellt von Yingyong Lao.
Benutzer: laoyingyong
Datum: 10.12.2019
Zeit: 19:28
--%>
<%@ Seite contentType="text/html;charset=UTF-8" Sprache="java" %>
<html>
<Kopf>
<title>Informationen zum Niederschlag anzeigen</title>
<!-- 1. Globale CSS-Stile importieren -->
<link href="css/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery-Import, es wird empfohlen, Version 1.9 oder höher zu verwenden -->
<script src="js/jquery-2.1.0.min.js"></script>
<!-- 3. Bootstrap-JS-Datei importieren-->
<script src="js/bootstrap.min.js"></script>
<Skript>
$(function () //Eintragsfunktion {
$.post("ViewRainByPageServlet",{currentPage:1,pageSize:5},function (data)//Nachdem die Seite geladen wurde, senden Sie eine Ajax-Anfrage, um die ersten 5 Datensätze anzufordern und die Initialisierung der Schnittstelle abzuschließen {
var totalCount=data.totalCount;//Gesamtzahl der Datensätzevar totalPage=data.totalPage;//Gesamtzahl der Seitenvar currentPage=data.currentPage;//Aktuelle Seitennummerif(currentPage==1)//Wenn die aktuelle Seitennummer 1 ist und der Benutzer auf die vorherige Seite klickt, setzen Sie class="disabled", um ein "deaktiviertes" Symbol anzuzeigen{
var str = ' <li Klasse="deaktiviert" onclick="findByPage('+(currentPage-1)+',5)">\n' +
' <a href="#" aria-label="Zurück">\n' +
' <span aria-hidden="true">«</span>\n' +
' </a>\n' +
' </li>';
}
sonst //Andernfalls ist der Button auf der vorherigen Seite im normalen Stil {
var str=' <li οnclick="findByPage('+(currentPage-1)+',5)">\n' +
' <a href="#" aria-label="Zurück">\n' +
' <span aria-hidden="true">«</span>\n' +
' </a>\n' +
' </li>';
}
for(var i=1;i<=totalPage;i++)//Durchlaufe die Seitenzahl, also die Zahl zwischen den beiden Symbolen (vorherige Seite und nächste Seite) {
if(i==currentPage)//Wenn die aktuelle Nummer gleich der aktuellen Seitennummer currentPage ist, setze class="active", d.h. die Seitennummer wird hervorgehoben {
var item='<li οnclick="findByPage('+i+',5);" class="active"><a href="#">'+i+'</a></li>';
}
anders
{
var item='<li οnclick="findByPage('+i+',5);"><a href="#">'+i+'</a></li>';
}
str=str+Element;
}
if(currentPage==totalPage)//Wenn die aktuelle Seitenzahl die letzte Seite ist und der Benutzer auf die nächste Seite klickt, setzen Sie class="disabled", sodass ein "deaktiviertes" Symbol erscheint {
var strend='<li class="disabled" onclick="findByPage('+(currentPage+1)+',5)">\n' +
' <a href="#" aria-label="Weiter">\n' +
' <span aria-hidden="true">»</span>\n' +
' </a>\n' +
' </li>\n' +
' <span style="font-size: 24px" id="total_sp">Insgesamt '+totalCount+' Datensätze, insgesamt '+totalPage+' Seiten</span>';
}
sonst //Wenn es nicht die letzte Seite ist, ist es der normale Stil {
var strend='<li οnclick="findByPage('+(currentPage+1)+',5)">\n' +
' <a href="#" aria-label="Weiter">\n' +
' <span aria-hidden="true">»</span>\n' +
' </a>\n' +
' </li>\n' +
' <span style="font-size: 24px" id="total_sp">Insgesamt '+totalCount+' Datensätze, insgesamt '+totalPage+' Seiten</span>';
}
str=str+strend;
$("#fenyelan").html(str); //Initialisierung der Seitenleiste var array=data.list;
für (var i = 0; i < Array.Länge; i++)
{
var obj=array[i];
var id=Objekt.id;
var Bereich=Objekt.Bereich;
var Niederschlag = Obj.Niederschlag;
var Monat=Objekt.Monat;
var releaseDate=obj.releaseDate;
// Initialisierung der Tabelle $("#rain_table").append('<tr class="info">\n' +
' <td style="text-align: center">'+id+'</td>\n' +
' <td style="text-align: center">'+Bereich+'</td>\n' +
' <td style="text-align: center">'+Niederschlag+'</td>\n' +
' <td style="text-align: center">'+Monat+'</td>\n' +
' <td style="text-align: center">'+Veröffentlichungsdatum+'</td>\n' +
' </tr>');
}
});//Senden Sie eine Ajax-Anfrage, nachdem die Seite geladen wurde.
});//Eintragsfunktion Ende
//Die Callback-Funktion für das Klicken auf die Seitenschaltfläche muss nicht in die Eingabefunktion geschrieben werden, da diese Funktion nur aufgerufen wird, wenn auf die Seitenschaltfläche geklickt wird. Funktion findByPage(curPage,paSize) //Beim Aufruf müssen zwei Parameter übergeben werden: die aktuelle Seitenzahl und die Seitengröße (wie viele Datensätze gibt es auf einer Seite)
{
$.post("ViewRainByPageServlet",{currentPage:curPage,pageSize:paSize},function (data) //Ajax-Anfrage senden {
var totalCount=data.totalCount;//Gesamtzahl der Datensätzevar totalPage=data.totalPage;//Gesamtzahl der Seitenvar currentPage=data.currentPage;//Aktuelle Seitennummerif(currentPage==1)//Wenn die aktuelle Seitennummer 1 ist und der Benutzer auf die vorherige Seite klickt, setzen Sie class="disabled", um ein "deaktiviertes" Symbol anzuzeigen{
var str = ' <li Klasse="deaktiviert" onclick="findByPage('+(currentPage-1)+',5)">\n' +
' <a href="#" aria-label="Zurück">\n' +
' <span aria-hidden="true">«</span>\n' +
' </a>\n' +
' </li>';
}
sonst //Wenn es nicht die erste Seite ist, wird die Schaltfläche „Vorherige Seite“ im normalen Stil angezeigt {
var str=' <li οnclick="findByPage('+(currentPage-1)+',5)">\n' +
' <a href="#" aria-label="Zurück">\n' +
' <span aria-hidden="true">«</span>\n' +
' </a>\n' +
' </li>';
}
//Der mittlere Zahlenteil des Paging-Streifens für (var i=1;i<=totalPage;i++)
{
if(i==currentPage)//Wenn die aktuelle Nummer gleich der aktuellen Seitennummer currentPage ist, setze class="active", d.h. die Seitennummer wird hervorgehoben {
var item='<li οnclick="findByPage('+i+',5);" class="active"><a href="#">'+i+'</a></li>';
}
anders
{
var item='<li οnclick="findByPage('+i+',5);"><a href="#">'+i+'</a></li>';
}
str=str+Element;
}
if(currentPage==totalPage)//Wenn die aktuelle Seitenzahl die letzte Seite ist und der Benutzer auf die nächste Seite klickt, setzen Sie class="disabled", sodass ein "deaktiviertes" Symbol erscheint {
var strend='<li class="disabled" onclick="findByPage('+(currentPage+1)+',5)">\n' +
' <a href="#" aria-label="Weiter">\n' +
' <span aria-hidden="true">»</span>\n' +
' </a>\n' +
' </li>\n' +
' <span style="font-size: 24px" id="total_sp">Insgesamt '+totalCount+' Datensätze, insgesamt '+totalPage+' Seiten</span>';
}
sonst //Wenn es nicht die letzte Seite ist, ist es der normale Stil {
var strend='<li οnclick="findByPage('+(currentPage+1)+',5)">\n' +
' <a href="#" aria-label="Weiter">\n' +
' <span aria-hidden="true">»</span>\n' +
' </a>\n' +
' </li>\n' +
' <span style="font-size: 24px" id="total_sp">Insgesamt '+totalCount+' Datensätze, insgesamt '+totalPage+' Seiten</span>';
}
str=str+strend;
$("#fenyelan").html(str);//Inhalt des Seitenstreifens ändern//Tabelle string var tableStr='<caption style="text-align: center;font-size: 24px">Übersicht über Niederschlagsinformationen</caption>\n' +
' <tr class="erfolg">\n' +
' <th style="text-align: center">id</th>\n' +
' <th style="text-align: center">Region</th>\n' +
' <th style="text-align: center">Niederschlag (mm)</th>\n' +
' <th style="text-align: center">Monat</th>\n' +
' <th style="text-align: center">Veröffentlichungsdatum</th>\n' +
' </tr>';
var array=data.list;//Objekt-Array mit spezifischem Inhalt for(var i=0;i<array.length;i++)//Objektgruppe durchlaufen {
var obj=array[i]; //Ein Element eines Arrays ist ein Objekt var id=obj.id;
var Bereich=Objekt.Bereich;
var Niederschlag = Obj.Niederschlag;
var Monat=Objekt.Monat;
var releaseDate=obj.releaseDate;
//Eine Reihe aufgezeichneter Zeichenfolgen var oneRecord = '<tr class="info">\n' +
' <td style="text-align: center">'+id+'</td>\n' +
' <td style="text-align: center">'+Bereich+'</td>\n' +
' <td style="text-align: center">'+Niederschlag+'</td>\n' +
' <td style="text-align: center">'+Monat+'</td>\n' +
' <td style="text-align: center">'+Veröffentlichungsdatum+'</td>\n' +
' </tr>';
tableStr=tableStr+oneRecord; //Tabellenzeichenfolge anhängen, jedes Mal, wenn ein Datensatz durchlaufen wird, wird eine Zeile hinzugefügt}
$("#rain_table").html(tableStr);//Ändern Sie den Inhalt der Tabelle});//Ajax-Anfrage Ende
}//Seitenschaltflächen-Klickfunktionsende
</Skript>
</Kopf>
<Text>
<div Klasse="Container">
<div Klasse="Zeile">
<table class="table Tabellenrand Tabelle-Hover" id="rain_table">
<caption style="text-align: center;font-size: 24px">Niederschlagsinformationen auf einen Blick</caption>
<tr class="Erfolg">
<th style="text-align: center">Ich würde</th>
Region
<th style="text-align: center">Niederschlag (mm)</th>
<th style="text-align: center">Monat</th>
<th style="text-align: center">Veröffentlichungsdatum</th>
</tr>
</Tabelle>
<nav aria-label="Seitennavigation">
<ul Klasse="pagination" id="fenyelan">
<li>
<a href="#" aria-label="Zurück">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li>
<a href="#" aria-label="Weiter">
<span aria-hidden="true">»</span>
</a>
</li>
<span style="font-size: 24px" id="total_sp">Insgesamt 2 Datensätze, insgesamt 1 Seite</span>
</ul>
</nav>
</div>
</div>
</body>
</html>7. Effektanzeige
Dies ist nur eine einfache Paginierungsleiste ohne den Effekt der Paginierungsleiste „erste fünf und letzte vier“ von Baidu. Wenn die Datenmenge sehr groß wird, nimmt diese Paging-Leiste viel Platz ein. Wenn Sie Zeit haben, optimieren Sie sie. Was den JQuery-Code betrifft, wird er in den Codekommentaren klar erklärt, deshalb werde ich hier nicht im Detail darauf eingehen. Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Erläuterung des Beispiels für die automatische Anmeldung unter Linux
>>: Docker-Bereitstellung von Kafka und Spring Kafka-Implementierung
Artikel empfehlen
CSS zum Erzielen des Skeleton Screen-Effekts
Beim Laden von Netzwerkdaten wird zur Verbesserun...
So verwenden Sie Vue3-Mixin
Inhaltsverzeichnis 1. Wie verwende ich Mixin? 2. ...
V-Bind in Vue verstehen
Inhaltsverzeichnis 1. Analyse des wichtigsten Que...
Zwei Möglichkeiten zum korrekten Bereinigen von MySQL-Binlog-Protokollen
mysql bereinigt Binlog-Protokolle korrekt Vorwort...
Detailliertes Tutorial zum Kompilieren und Installieren von MySQL 5.7.24 auf CentOS7
Inhaltsverzeichnis Abhängigkeiten installieren Bo...
Detaillierte Erklärung der Box-Größe in CSS3 (Content-Box und Border-Box)
Box-Größe in CSS3 (Inhaltsbox und Rahmenbox) Mit ...
So binden Sie einen Domänennamen an den Nginx-Dienst
Konfigurieren Sie mehrere Server in nginx.conf: B...
HTML-Codeanalyse der Textkonvertierungseffekte bei Links- und Rechtsbewegungen
<div ausrichten="zentrieren"> <...
CSS-Implementierungscode für horizontale und vertikale Fortschrittsbalken
Manchmal ist es schön, ein paar nette Scrollbar-E...
Beispiel zur Identifizierung des Benutzers mithilfe eines Linux-Bash-Skripts
In Bash-Skripten oder direkt im Skript selbst ist...
Detaillierte Erklärung zum Datenaustausch zwischen Vue-Komponenten
Inhaltsverzeichnis 1. In der Projektentwicklung w...
Die Methode zur Änderung vergessener MySql-Passwörter ist für Versionen ab 5.7 geeignet.
1. Stoppen Sie zuerst den mysqld.exe-Prozess 2. Ö...
So installieren Sie eine MySQL-Datenbank im Deepin 2014-System
Deepin 2014 herunterladen und installieren Zum He...
Detailliertes Installationstutorial für MySQL 5.7 unter CentOS 6 und 7
Für die Entwicklung benötigen Sie immer Daten. Al...
Implementierungscode für die HTML-Drag & Drop-Funktion
Basierend auf Vue Die Kernidee dieser Funktion be...