Heim > Artikel > Web-Frontend > Wie implementiert man eine einfache Paging-Funktion mit js? (Codebeispiel)
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 = ''; 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); }
[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!