jquery分页效果源码实例

关于分页效果，自然就不用多说了，几乎在任何网站都能够看到，特别是项目比较多的功能，使用分页可以有效的组织和浏览数据，当前比较流行结合js实现此效果，下面就极少一下jQuery试下的分页效果，虽然是静态的，如果需要和后台关联，只要进行改造就可以了。代码实例如下:

[ jQuery ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<style type="text/css">
.main {
  width:800px;
  zoom:1;
  margin:0 auto;
}
.item {
  width:800px;
  overflow:hidden;
}
ul {
  padding:0;
  width:860px;
  zoom:1;
}
.clear{zoom:1;}
.clear:after {
  content:"";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
ul li {
  list-style-type:none;
  float:left;
  background:#F69;
  font-size:60px;
  text-shadow:1px 1px 3px #555;
  width:380px;
  height:200px;
  margin:10px 40px 10px 0;
  line-height:200px;
  text-align:center;
  color:#fff;
}
.page_btn{padding-top:20px;}
.page_btn a {
  cursor:pointer;
  padding:5px;
  border:solid 1px #ccc;
  font-size:12px;
}
.page_box{float:right;
}
.num{padding:0 10px;}
</style>
<script type="text/javascript" src="https://www.qianduan.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("ul li:gt(3)").hide();//初始化，前面4条数据显示，其他的数据隐藏
  var total_q=$("ul li").index()+1;//总数据
  var current_page=4;//每页显示的数据
  var current_num=1;//当前页数
  var total_page= Math.round(total_q/current_page);//总页数  
  var next=$(".next");//下一页
  var prev=$(".prev");//上一页
  $(".total").text(total_page);//显示总页数
  $(".current_page").text(current_num);//当前的页数
  //下一页
  $(".next").click(function(){
    if(current_num==7){
      return false;//如果大于总页数就禁用下一页
    }
    else{
      $(".current_page").text(++current_num);//点击下一页的时候当前页数的值就加1
      $.each($('ul li'),function(index,item){
        var start = current_page* (current_num-1);//起始范围
        var end = current_page * current_num;//结束范围
        //如果索引值是在start和end之间的元素就显示，否则就隐
        if(index >= start && index < end){
          $(this).show();
        }else{
          $(this).hide();
        }
      });
    }
  });
  //上一页方法
  $(".prev").click(function(){
    if(current_num==1){
      return false;
    }else{
      $(".current_page").text(--current_num);
      $.each($('ul li'),function(index,item){
        var start = current_page* (current_num-1);//起始范围
        var end = current_page * current_num;//结束范围
        //如果索引值是在start和end之间的元素就显示，否则就隐藏
        if(index >= start && index < end){
          $(this).show();
        }else {
          $(this).hide(); 
        }
      });
    }
  })
})
</script>
</head>
<body>
<div class="main">
  <div class="item">
    <ul class="clear">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>24</li>
      <li>25</li>
      <li>26</li>
      <li>27</li>
      <li>28</li>
    </ul>
  </div>
  <div class="page_btn clear"> 
    <span class="page_box"> 
      <a class="prev">上一页</a>
      <span class="num">
        <span class="current_page">1</span>
        <span style="padding:0 3px;">/</span>
        <span class="total"></span>
      </span>
      <a class="next">下一页</a> 
    </span> 
  </div>
</div>
</body>
</html>

代码描述：jquery分页效果。jquery分页效果源码实例

下载全部收藏

127 169

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册