分页功能对于网站建设来说,基本上是必不可少的。那么如何使用js实现简单的分页功能呢?对于新手或者非资深程序员来说,本篇文章关于js分页功能实现的介绍或许有所帮助。
js实现简单分页代码示例如下:
1.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.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); }
【相关文章推荐】
Atas ialah kandungan terperinci 如何用js实现简单分页的功能?(代码示例). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!