Einfache Implementierung des JSP-Paging-Anzeigeeffekts

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;

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);

}

function goToPage(page, numberPerPage){

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

}

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"));

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;
 }

① 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;
}

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>

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);
  }
}

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>

Auf diese Weise wird die aktuelle Seite fett und orange markiert:

.currentPage{
  font-weight:bold;
  color:#ff9a00;
}

#jumpTo{
width:20px;
}

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;
}

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!