zoukankan      html  css  js  c++  java
  • 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'>共&nbsp;"+totalpage+"&nbsp;页&nbsp;|&nbsp;第&nbsp;"+cpage+"&nbsp;页</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 谢谢

  • 相关阅读:
    LeetCode15 3Sum
    LeetCode10 Regular Expression Matching
    LeetCode20 Valid Parentheses
    LeetCode21 Merge Two Sorted Lists
    LeetCode13 Roman to Integer
    LeetCode12 Integer to Roman
    LeetCode11 Container With Most Water
    LeetCode19 Remove Nth Node From End of List
    LeetCode14 Longest Common Prefix
    LeetCode9 Palindrome Number
  • 原文地址:https://www.cnblogs.com/iyitong/p/4220824.html
Copyright © 2011-2022 走看看