Implémentation simple de l'effet d'affichage de la pagination JSP

Cet article présente principalement en détail l'implémentation simple de l'effet d'affichage de pagination JSP. Il a une certaine valeur de référence et d'apprentissage pour JSP. Les amis intéressés par JSP peuvent se référer à cet article

Cet article Les exemples de partage. le code spécifique pour l'effet d'affichage de la pagination JSP pour votre référence. Le contenu spécifique est le suivant

1. Le mot-clé limite (DAO) de MySQL

select * from tablename limit startPoint, numberPerPage;

tablename est. le nom du tableau à afficher dans les pages ;

startPoint est la position de départ -1 ;

numberPerPage est le nombre d'éléments affichés sur une page.

Par exemple : sélectionnez * dans la limite de commentaires 20,5 ;

extrait les commentaires 21~25 de la table des commentaires :

2. Fonction de chargement jQuery (page JS)

Le mot-clé limit de MySQL peut extraire des enregistrements dans une certaine plage (n, n+m], ce qui signifie que deux paramètres sont nécessaires pour déterminer le contenu affiché. sur une certaine page, c'est-à-dire "page x" et le nombre d'éléments affichés sur chaque page

Le nombre d'éléments affichés sur chaque page peut être défini dans le programme ou par l'utilisateur Le paramètre ". page x" doit être indiqué par l'utilisateur. Lorsque l'utilisateur clique sur le numéro de page, le bouton page suivante/page précédente ou passe à une certaine page, le paramètre "page x" doit être envoyé au serveur afin que l'extraction des enregistrements.

function goToPage(page){

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

}

Ou, si les deux paramètres sont spécifiés par l'utilisateur, la fonction peut s'écrire comme :

function goToPage(page, numberPerPage){

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

}

3, servlet Recevoir les paramètres et organiser le contenu (fichier servlet)

La servlet apprend que l'utilisateur souhaite parcourir la page X et combien d'enregistrements sont affichés sur une page en acceptant les paramètres page et npp dans l'objet de requête de la page jsp .

int page = Integer.parseInt(req.getParameter("page"));

4. La servlet calcule le nombre de pages affichées

affiche généralement environ 10 pages à la fois, c'est-à-dire si elle est actuellement activée. page 52, puis facultatif La liste des numéros de page est 50, 51, 52... jusqu'à 60. La méthode de calcul de

est que si vous êtes sur la page x, la valeur de départ est x/10*10, à condition que x>10. Écrit sous forme de code :

int start = 1;
if(page >= 10){
　　start = page/10 * 10;
 }

Il existe deux cas particuliers :

① Le nombre total de pages est inférieur à 10

② Le nombre de pages n'est pas un multiple entier de 10

Cela rendra la liste des pages inférieure à 10, et c'est facile à gérer. Ajoutez simplement ifjugement conditionnel. comme suit :

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. Afficher la liste des pages sur la page jsp

Grâce à 4, nous obtenons une liste de pages calculée pageArr. devrait s'afficher pour la page actuelle afin que les utilisateurs puissent cliquer directement. Mettez la liste pageArr tout à l'heure dans l'objet de réponse, ainsi que la page (numéro de page actuel) et totalPage (numéro de page maximum) pour nous aider à porter des jugements ><🎜. >

Fonctions JS utilisées

<!-- 上一页 按钮 -->
<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>

6. Effet d'amélioration CSS

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

Afin de mettre en évidence le numéro de page sur lequel nous nous trouvons, ci-dessus Dans le code, nous a délibérément porté un jugement :

De cette façon, le numéro de page actuel sera marqué comme la classe currentPage, afin qu'il puisse être souligné dans le fichier CSS. Par exemple :

Ou définissez la largeur de la zone de saisie de la page de saut suivante

<c:when test="${item == page}">
<a href="checkComments.do?page=${item}" class="currentPage">${item}</a>
</c:when>

De cette façon, la page actuelle sera marquée en gras et en orange :

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

#jumpTo{
width:20px;
}

7. Amélioration

Bien qu'il soit plus pratique d'utiliser la méthode de balise a pour créer des liens, des soulignements apparaîtront, ce qui semble très démodé. . Vous pouvez utiliser CSS pour l'éliminer ou ajouter quelques modifications lors du survol.

Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun ! !

#pageControl a {
  text-decoration:none;
}

Recommandations associées :

Introduction aux bases de JSP

Résumé de l'expérience de l'organigramme JsPlumb

jsp réalise la fonction de pagination des pages supérieures et inférieures

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!