Maison >interface Web >js tutoriel >Code d'implémentation pour les effets de pagination NodeJS et BootStrap

Code d'implémentation pour les effets de pagination NodeJS et BootStrap

高洛峰
高洛峰original
2017-01-04 16:40:021345parcourir

1. Traitement des données

Tout d'abord, dans Dynamic Js, obtenez le nombre de documents de la base de données en fonction des paramètres d'URL, définissez la taille de la pagination, obtenez les données de la page actuelle, puis ajoutez le nombre de le nombre de pages du document, la taille de la pagination, la taille de la page et la page actuelle, la page actuelle sont transmises à la page.

2. Traitement de l'effet de pagination

J'utilise JavaScript pour le générer dynamiquement. Vous pouvez également utiliser les fonctionnalités de la fonction de support ejs pour l'encapsuler et générer une pagination sous forme HTML.

Tout d'abord, ajoutez la pagination ul, ajoutez le code là où il doit être affiché sur votre page :

<ul class="pagination" id="pagination">
</ul>

Insérez ensuite le code pour gérer la pagination dans la balise script :

$(document).ready(function() {
if($("#pagination")){
var pagecount = <%= locals.pagecount %>;
var pagesize = <%= locals.pagesize %>;
var currentpage = <%= locals.currentpage %>;
var counts,pagehtml="";
if(pagecount%pagesize==0){
counts = parseInt(pagecount/pagesize);
}else{
counts = parseInt(pagecount/pagesize)+1;
}
//只有一页内容
if(pagecount<=pagesize){pagehtml="";}
//大于一页内容
if(pagecount>pagesize){
if(currentpage>1){
pagehtml+= &#39;<li><a rel="external nofollow" href="/course/index/&#39;+(currentpage-1)+&#39;">上一页</a></li>&#39;;
}
for(var i=0;i<counts;i++){
if(i>=(currentpage-3) && i<(currentpage+3)){
if(i==currentpage-1){
pagehtml+= &#39;<li class="active"><a rel="external nofollow" href="/course/index/&#39;+(i+1)+&#39;">&#39;+(i+1)+&#39;</a></li>&#39;;
}else{
pagehtml+= &#39;<li><a rel="external nofollow" href="/course/index/&#39;+(i+1)+&#39;">&#39;+(i+1)+&#39;</a></li>&#39;;
}
 
}
}
if(currentpage<counts){
pagehtml+= &#39;<li><a rel="external nofollow" href="/course/index/&#39;+(currentpage+1)+&#39;">下一页</a></li>&#39;;
}
}
$("#pagination").html(pagehtml);
}
});

Remarque : locals.pagecount, locals.pagesize et locals.currentpage correspondent respectivement au nombre de bases de données, à la taille de la pagination et à la pagination actuelle. Ils sont transmis depuis js. Bien sûr, vous pouvez également les modifier directement en données fixes. pour tester.

Par exemple :

Code dimplémentation pour les effets de pagination NodeJS et BootStrap

L'effet réel est :

Code dimplémentation pour les effets de pagination NodeJS et BootStrap

Un effet de pagination aussi simple vient out

Ce qui précède est le code d'implémentation de l'effet de pagination NodeJS et BootStrap introduit par l'éditeur. J'espère qu'il vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra. vous à temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

Pour plus d'articles liés au code d'implémentation des effets de pagination NodeJS et BootStrap, veuillez faire attention au site Web PHP chinois !


Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn