网上有很多分页的插件
但是没有自己想要的
上代码吧,只有分页部分代码,css 省略了
html
1 <div class="bar2 fr" id="pagecontrol"> 2 <ul> 3 <li><span id="prepage">上一页</span></li> 4 <li class="num current"><a>1</a></li> 5 <li class="num"><a>2</a></li> 6 <li class="num"><a>3</a></li> 7 <li class="num"><a>4</a></li> 8 <li class="num"><a>5</a></li> 9 <li><span id="nextpage">下一页<span></li> 10 </ul> 11 </div>
js
1 $(function(){ 2 var curpage=1;//当前页码 3 var maxpage = 10;//最大页码 4 5 if(maxpage > 1) 6 $("#nextpage").addClass("active"); 7 8 $("#rowsToshow").change(function(){ 9 console.log($("#rowsToshow").val()); 10 }) 11 $("#prepage").live("click",function(){ 12 curpage = curpage - 1; 13 pageshow(curpage,maxpage); 14 }) 15 $("#nextpage").live("click",function(){ 16 curpage = curpage + 1; 17 pageshow(curpage,maxpage); 18 }) 19 $("#pagecontrol li a").live("click",function(){ 20 curpage = Number($(this).text()); 21 pageshow(curpage,maxpage); 22 }) 23 }) 24 25 function pageshow(cp,tp){ 26 27 var sp = cp - 2;//startpage 28 var ep = cp + 2;//endpage 29 var eoff = ep - tp;//tp:totalpage 30 if(eoff>0){ 31 sp = sp - eoff; 32 } 33 if(sp<=0){ 34 ep = ep -sp + 1; 35 } 36 var str = ‘‘; 37 if(cp != 1) 38 str = str + ‘<ul><li><span id="prepage" class="active">上一页</span></li>‘ 39 else 40 str = str + ‘<ul><li><span id="prepage">上一页</span></li>‘ 41 for(var i= sp;i<=ep;i++){ 42 if(i>0&& i<=tp){ 43 if(i == cp) 44 str = str + ‘<li class="num current"><a>‘+i+‘</a></li>‘; 45 else 46 str = str + ‘<li class="num"><a>‘+i+‘</a></li>‘; 47 } 48 } 49 50 if(cp != tp) 51 str = str + ‘<li><span class="active" id="nextpage">下一页<span></li></ul>‘; 52 else 53 str = str + ‘<li><span id="nextpage">下一页<span></li></ul>‘; 54 $("#pagecontrol").html(str); 55 }
效果图
时间: 2024-10-22 20:10:47