首页 > 代码库 > jQuery静态分页功能
jQuery静态分页功能
分页功能在做项目的过程中是常常用到的，下面是我常用的一款分页效果：
1、分页的CSS样式(page.css)
1 #setpage { 2 margin: 15px auto; 3 text-align: center; 4 } 5 #setpage a:link,#setpage a:visited,#setpage a:hover,#setpage .current,#setpage #info{ 6 border:1px solid #DDD; 7 background:#0d6cbf; 8 display:inline-block; 9 margin:1px; 10 text-decoration:none; 11 text-align:center; 12 color:#fff; 13 padding: 5px 10px; 14 font-size: 16px;15 border-radius: 5px;16 } 17 #setpage a:hover{ 18 border:1px solid #0d6cbf; 19 background: #0d6cbf; 20 } 21 #setpage .current{ 22 border:1px solid #0d6cbf; 23 background: #fff; 24 margin:1px; 25 color: #000; 26 text-decoration: underline;27 } 28 #setpage #info{ 29 width:auto; 30 }
2、分页的js代码(page.js)
1 var totalpage,pagesize,cpage,count,curcount,outstr; 2 //初始化 3 cpage = 1; //当前页（设置为全局变量） 4 totalpage = 56; //总页数 5 pagesize = 10; //每页显示的数据数量 6 outstr = ""; //显示分页效果 7 8 function gotopage(target) 9 { 10 cpage = target; //把页面计数定位到第几页 11 12 //这里写页面跳转时要调用的方法13 var state = $("#state").find("option:selected").val();14 getData(state,cpage ); 15 16 //setpage(); 17 //reloadpage(target); //调用显示页面函数显示第几页,这个功能是用在页面内容用ajax载入的情况18 }19 20 function setpage() 21 { 22 if(totalpage<=10){ //总页数小于十页 23 for (count=1;count<=totalpage;count++) 24 { if(count!=cpage) 25 { 26 outstr = outstr + "<a href=‘javascript:void(0)‘ onclick=‘gotopage("+count+")‘>"+count+"</a>"; 27 }else{ 28 outstr = outstr + "<span class=‘current‘ >"+count+"</span>"; 29 } 30 } 31 } 32 if(totalpage>10){ //总页数大于十页 33 if(parseInt((cpage-1)/10) == 0) 34 { 35 for (count=1;count<=10;count++) 36 { if(count!=cpage) 37 { 38 outstr = outstr + "<a href=‘javascript:void(0)‘ onclick=‘gotopage("+count+")‘>"+count+"</a>"; 39 }else{ 40 outstr = outstr + "<span class=‘current‘>"+count+"</span>"; 41 } 42 } 43 outstr = outstr + "<a href=‘javascript:void(0)‘ onclick=‘gotopage("+count+")‘> 下一组 </a>"; 44 } 45 else if(parseInt((cpage-1)/10) == parseInt(totalpage/10)) 46 { 47 outstr = outstr + "<a href=‘javascript:void(0)‘ onclick=‘gotopage("+(parseInt((cpage-1)/10)*10)+")‘>上一组</a>"; 48 for (count=parseInt(totalpage/10)*10+1;count<=totalpage;count++) 49 { if(count!=cpage) 50 { 51 outstr = outstr + "<a href=‘javascript:void(0)‘ onclick=‘gotopage("+count+")‘>"+count+"</a>"; 52 }else{ 53 outstr = outstr + "<span class=‘current‘>"+count+"</span>"; 54 } 55 } 56 } 57 else 58 { 59 outstr = outstr + "<a href=‘javascript:void(0)‘ onclick=‘gotopage("+(parseInt((cpage-1)/10)*10)+")‘>上一组</a>"; 60 for (count=parseInt((cpage-1)/10)*10+1;count<=parseInt((cpage-1)/10)*10+10;count++) 61 { 62 if(count!=cpage) 63 { 64 outstr = outstr + "<a href=‘javascript:void(0)‘ onclick=‘gotopage("+count+")‘>"+count+"</a>"; 65 }else{ 66 outstr = outstr + "<span class=‘current‘>"+count+"</span>"; 67 } 68 } 69 outstr = outstr + "<a href=‘javascript:void(0)‘ onclick=‘gotopage("+count+")‘> 下一组 </a>"; 70 } 71 } 72 document.getElementById("setpage").innerHTML = "<div id=‘setpage‘><span id=‘info‘>共 "+totalpage+" 页 | 第 "+cpage+" 页</span>" + outstr + "</div>"; 73 outstr = ""; 74 }
3、完整的html源码(page.html)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>js静态分页</title> 7 <script type="text/javascript" src="http://iyitong.qiniudn.com/jquery-1.11.1.min.js"></script> 8 <!-- 引入分页js --> 9 <script src="http://7tszs6.com1.z0.glb.clouddn.com/page.js"></script>10 11 <style>12 #setpage { margin: 15px auto; text-align: center; }13 #setpage a:link,#setpage a:visited,#setpage a:hover,#setpage .current,#setpage #info{ 14 border:1px solid #DDD; 15 background:#0d6cbf; 16 display:inline-block; 17 margin:1px; 18 text-decoration:none; 19 text-align:center; 20 color:#fff; 21 padding: 5px 10px; 22 font-size: 16px;23 border-radius: 5px;24 } 25 #setpage a:hover { border:1px solid #0d6cbf; background: #0d6cbf; } 26 #setpage .current { 27 border:1px solid #0d6cbf; 28 background: #fff; 29 margin:1px; color: #000; 30 text-decoration: underline; 31 } 32 #setpage #info { width:auto; } 33 </style>34 35 <script>36 $(function(){37 //静态页面时直接调用setpage()方法即可38 setpage();39 // 如果需要通过ajax动态加载json数据，通过以下方式调用40 // pageIndex，分页参数,初始值为141 // function getData(pageIndex){42 // var url = ""; //请求数据的接口43 // $.getJSON(url,{44 // // 这里写需要传递的参数45 // pageIndex:pageIndex46 // },function(result){47 // // 在这里调用分页函数48 // // size：表示返回的数据总数量49 // var size = result.data.size;50 // var pagesize = 50;//每页显示数据数量51 // var totalpage=Math.floor((size-1)/pagesize)+1;//总页数52 // setpage();//调用分页53 // });54 // }55 });56 </script>57 </head>58 <body>59 <!-- 这里是显示分页的元素 -->60 <div id="setpage"></div>61 62 </body>63 </html>
4、最终的效果图：
本地预览
大家有更好的方法，请多多分享交流！
长路漫漫，只因学无止境...
转发请注明文章出处：http://www.cnblogs.com/iyitong/p/4220824.html 谢谢
jQuery静态分页功能
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。