Heim > Java > javaLernprogramm > Hauptteil

Einfache Implementierung des JSP-Paging-Anzeigeeffekts

韦小宝
Freigeben: 2018-01-18 09:46:11
Original
2948 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die einfache Implementierung des JSP-Paging-Anzeigeeffekts vor. Er hat einen gewissen Referenz- und Lernwert für JSP-Freunde, die sich für JSP interessieren.

Dieser Artikel Das Beispiel teilt Der spezifische Code für den JSP-Paging-Anzeigeeffekt lautet zu Ihrer Information:

1. MySQLs Limit-Schlüsselwort (DAO)

select * from tablename limit startPoint, numberPerPage;
Nach dem Login kopieren

tablename der Name der Tabelle, die in Seiten angezeigt werden soll;

startPoint ist die Startposition -1;

numberPerPage ist die Anzahl der auf einer Seite angezeigten Elemente.

Zum Beispiel: * aus Kommentarlimit 20,5 auswählen;

extrahiert die Kommentare 21~25 aus der Kommentartabelle:

2. jQuery-Ladefunktion (Seite JS)

Das Limit-Schlüsselwort von MySQL kann Datensätze innerhalb eines bestimmten Bereichs (n, n+m] extrahieren, was bedeutet, dass zwei Parameter erforderlich sind, um den angezeigten Inhalt zu bestimmen auf einer bestimmten Seite, also „Seite x“ und die Anzahl der auf jeder Seite angezeigten Elemente kann im Programm oder vom Benutzer festgelegt werden Der Parameter „Seite“ muss vom Benutzer angegeben werden. Wenn der Benutzer auf die Seitenzahl, die Schaltfläche „Nächste Seite/Vorherige Seite“ klickt oder zu einer bestimmten Seite springt, muss der Parameter „xte Seite“ an den Server gesendet werden, damit Datensätze extrahieren

Oder, wenn beide Parameter vom Benutzer angegeben werden, kann die Funktion wie folgt geschrieben werden:
function goToPage(page){

  $('body').load("getComments.do?page=" + page);

}
Nach dem Login kopieren

function goToPage(page, numberPerPage){

  $('body').load("getComments.do?page=" + page + "&npp=" + numberPerPage);

}
Nach dem Login kopieren
3,

Servlet Parameter empfangen und organisieren Inhalt (Servlet-Datei) Das Servlet erfährt, dass der Benutzer Seite X durchsuchen möchte und wie viele Datensätze auf einer Seite angezeigt werden, indem es die Seiten- und NPP-Parameter im Anforderungsobjekt von der JSP-Seite akzeptiert. .

int page = Integer.parseInt(req.getParameter("page"));
Nach dem Login kopieren
4. Das Servlet berechnet die Anzahl der angezeigten Seiten

zeigt normalerweise etwa 10 Seiten gleichzeitig an, wenn es sich gerade auf der Seite befindet 52, dann optional. Die Seitennummernliste ist 50, 51, 52 ... bis 60. Die Berechnungsmethode von

ist, dass, wenn Sie sich auf Seite x befinden, der Startwert x/10*10 ist, vorausgesetzt dass x>10. Als Code geschrieben:

Es gibt zwei Sonderfälle:
int start = 1;
if(page >= 10){
  start = page/10 * 10;
 }
Nach dem Login kopieren

① Die Gesamtzahl der Seiten beträgt weniger als 10

② Die Anzahl der Seiten sind kein ganzzahliges Vielfaches von 10

Dies führt dazu, dass die Seitenliste weniger als 10 beträgt, und es ist einfach, if

bedingte Beurteilung

hinzuzufügen folgt:

int total = sm.getCommentCount();
int totalPage = total/itemsPerPage;
if(total % itemsPerPage != 0){
  totalPage += 1;
}
Vector<Integer> pageArr = new Vector<Integer>();
int start = 1;
if(page >= 10){
   start = page/10 * 10;
 }
int num = start;
while(!(num > totalPage || num > start + 10)){
   pageArr.add(new Integer(num));
  ++num;
}
Nach dem Login kopieren
5. Zeigen Sie die Seitenliste auf der JSP-Seite an

Durch 4 erhalten wir eine berechnete Seitenliste pageArr Anzeige für die aktuelle Seite, damit Benutzer direkt klicken können. Fügen Sie die pageArr-Liste sowie die Seite (aktuelle Seitenzahl) und die Gesamtseite (maximale Seitenzahl) direkt in das Antwortobjekt ein, um uns bei der Beurteilung zu helfen

Verwendete JS-Funktionen


6. CSS-Verbesserungseffekt

<!-- 上一页 按钮 -->
<p id="pageControl">
<c:choose>
<c:when test="${page != 1}">
<a href="checkComments.do?page=${page-1}" rel="external nofollow" ><input type="button" name="lastPage" value="上一页" /></a>
</c:when>
<c:otherwise>
<input type="button" disabled="true" name="lastPage" value="上一页" /><!-- 为了要那个灰掉的button -->
</c:otherwise>
</c:choose>

<!-- 页数列表 -->
<c:forEach items="${pageList}" var="item">
<c:choose>
<c:when test="${item == page}">
<a href="checkComments.do?page=${item}" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="currentPage">${item}</a>
</c:when>
<c:otherwise>
<a href="checkComments.do?page=${item}" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${item}</a>
</c:otherwise>
</c:choose>
</c:forEach>

<!-- 下一页 按钮 -->
<c:choose>
<c:when test="${page != totalPages}">
<a href="checkComments.do?page=${page+1}" rel="external nofollow" >
<input type="button" name="nextPage" value="下一页" />
</a>
</c:when>
<c:otherwise>
<input type="button" disabled=true name="nextPage" value="下一页" /><!-- 为了要那个灰掉的button -->
</c:otherwise>
</c:choose>

<!-- 直接跳转 -->
共${totalPages}页 -向<input type="text" id="jumpTo" />页 <input type="button" value="跳转" onclick="jumpTo(${totalPages})" />
</p>
Nach dem Login kopieren

Um die Seitenzahl hervorzuheben, auf der wir uns oben befinden, haben wir dies absichtlich getan habe ein Urteil gefällt:

function jumpTo(maxPage){
  var page = $("#jumpTo").val();
  if(page > maxPage || page < 1){
    alert("对不起,无法到达该页")
  }else{
    $(&#39;body&#39;).load(&#39;checkComments.do?page=&#39; + page);
  }
}
Nach dem Login kopieren

Auf diese Weise wird die aktuelle Seitennummer als currentPage-Klasse markiert, sodass sie in der CSS-Datei hervorgehoben werden kann. Zum Beispiel:

Oder stellen Sie die Breite des folgenden Sprungseiten-Eingabefelds ein

<c:when test="${item == page}">
<a href="checkComments.do?page=${item}" class="currentPage">${item}</a>
</c:when>
Nach dem Login kopieren
Auf diese Weise wird die aktuelle Seite fett und orange markiert:

.currentPage{
  font-weight:bold;
  color:#ff9a00;
}
Nach dem Login kopieren

#jumpTo{
width:20px;
}
Nach dem Login kopieren
7. Verbesserung

Obwohl es bequemer ist, die A-Tag-Methode zum Erstellen von Links zu verwenden, werden Unterstreichungen angezeigt, was sich sehr unmodern anfühlt . Sie können CSS verwenden, um es zu entfernen, oder beim Bewegen der Maus einige Änderungen hinzufügen.

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für das Studium aller hilfreich sein! !

Verwandte Empfehlungen:
#pageControl a {
  text-decoration:none;
}
Nach dem Login kopieren

Einführung in die JSP-Grundlagen

JsPlumb Flowchart Experience Summary

jsp realisiert die Paging-Funktion der oberen und unteren Seiten

Das obige ist der detaillierte Inhalt vonEinfache Implementierung des JSP-Paging-Anzeigeeffekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!