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 = &#39;&#39;;
        if(cp != 1)
            str = str + &#39;<ul><li><span id="prepage" class="active">上一页</span></li>&#39;
        else
            str = str + &#39;<ul><li><span id="prepage">上一页</span></li>&#39;
        for(var i= sp;i<=ep;i++){
            if(i>0&& i<=tp){
                if(i == cp)
                    str = str + &#39;<li class="num current"><a>&#39;+i+&#39;</a></li>&#39;;
                else
                    str = str + &#39;<li class="num"><a>&#39;+i+&#39;</a></li>&#39;;
            }
        }
        
        if(cp != tp)
            str = str + &#39;<li><span class="active" id="nextpage">下一页<span></li></ul>&#39;;
        else
            str = str + &#39;<li><span id="nextpage">下一页<span></li></ul>&#39;;
        $("#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!