分页功能在做项目的过程中是常常用到的，下面是我常用的一款分页效果：
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，分页参数,初始值为1
41 // function getData(pageIndex){
42 // var url = ""; //请求数据的接口
43 // $.getJSON(url,{
44 // // 这里写需要传递的参数
45 // pageIndex:pageIndex
46 // },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 谢谢
时间： 2024-10-12 23:23:13