Heim  >  Artikel  >  Web-Frontend  >  Wie implementiert man eine einfache Paging-Funktion mit js? (Codebeispiel)

Wie implementiert man eine einfache Paging-Funktion mit js? (Codebeispiel)

藏色散人
藏色散人Original
2018-08-06 17:27:204769Durchsuche

Die Paging-Funktion ist grundsätzlich für die Website-Erstellung unerlässlich. Wie kann man also mit js eine einfache Paging-Funktion implementieren? Für Anfänger oder unerfahrene Programmierer kann die Einführung in die Implementierung der js-Paging-Funktion in diesem Artikel hilfreich sein.

JS-Implementierung eines einfachen Paging-Codebeispiels lautet wie folgt:

1.HTML-Code:

<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.js-Code:

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

Wie implementiert man eine einfache Paging-Funktion mit js? (Codebeispiel)

[Verwandte Artikel empfohlen]

Beispiel für PHP zur Erzielung eines Paging-Effekts

So verwenden Sie PHP, um die Listen-Paging-Funktion zu implementieren

Verwenden Sie PHP, um eine einfache Paging-Klasse und ihre detaillierte Verwendung zu implementieren

Javascript zur Implementierung der Paging-Funktion


Das obige ist der detaillierte Inhalt vonWie implementiert man eine einfache Paging-Funktion mit js? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn