Maison > Article > interface Web > Comment implémenter une fonction de pagination simple en utilisant js ? (exemple de code)
La fonction de pagination est fondamentalement essentielle pour la construction de sites Web. Alors, comment utiliser js pour implémenter une fonction de pagination simple ? Pour les programmeurs débutants ou non expérimentés, l'introduction de cet article à l'implémentation de la fonction de pagination js peut être utile.
L'implémentation JS d'un exemple de code de pagination simple est la suivante :
Code HTML :
<div class=" " id="pagecontrol"> <ul> <li><span id="prepage">上一页</span></li> <li class="num current"><a>1</a></li> <li class="num"><a>2</a></li> <li class="num"><a>3</a></li> <li class="num"><a>4</a></li> <li class="num"><a>5</a></li> <li><span id="nextpage">下一页<span></li> </ul> </div>
2 Code .js :
$(function(){ var curpage=1;//当前页码 var maxpage = 10;//最大页码 if(maxpage > 1) $("#nextpage").addClass("active"); $("#rowsToshow").change(function(){ console.log($("#rowsToshow").val()); }) $("#prepage").live("click",function(){ curpage = curpage - 1; pageshow(curpage,maxpage); }) $("#nextpage").live("click",function(){ curpage = curpage + 1; pageshow(curpage,maxpage); }) $("#pagecontrol li a").live("click",function(){ curpage = Number($(this).text()); pageshow(curpage,maxpage); }) }) function pageshow(cp,tp){ var sp = cp - 2;//startpage var ep = cp + 2;//endpage var eoff = ep - tp;//tp:totalpage if(eoff>0){ sp = sp - eoff; } if(sp<=0){ ep = ep -sp + 1; } var str = ''; if(cp != 1) str = str + '<ul><li><span id="prepage" class="active">上一页</span></li>' else str = str + '<ul><li><span id="prepage">上一页</span></li>' for(var i= sp;i<=ep;i++){ if(i>0&& i<=tp){ if(i == cp) str = str + '<li class="num current"><a>'+i+'</a></li>'; else str = str + '<li class="num"><a>'+i+'</a></li>'; } } if(cp != tp) str = str + '<li><span class="active" id="nextpage">下一页<span></li></ul>'; else str = str + '<li><span id="nextpage">下一页<span></li></ul>'; $("#pagecontrol").html(str); }
[Articles connexes recommandés]
Exemple d'implémentation de l'effet de pagination par PHP
Comment utiliser PHP pour implémenter la fonction de pagination de liste
Utiliser PHP pour implémenter une classe de pagination simple et son utilisation détaillée
JavaScript implémente la fonction de pagination
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!