jquery實現的分頁效果例項程式碼

admin發表於2017-03-04
jQuery

關於分頁效果，自然就不用多說了，幾乎在任何網站都能夠看到，特別是專案比較多的功能，使用分頁可以有效的組織和瀏覽資料，當前比較流行結合js實現此效果，下面就極少一下jQuery試下的分頁效果，雖然是靜態的，如果需要和後臺關聯，只要進行改造就可以了。程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</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="http://www.softwhy.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>

以上程式碼實現了我們的要求，點選上一頁下一頁，可以瀏覽不同的內容，程式碼雖然看起來比較長，其實很簡單，並且也有明確的註釋，這裡就不多介紹額，如果有任何疑問可以跟帖留言。

相關閱讀:

1.gt選擇器可以參閱jQuery :gt一章節。 

2.hide()函式可以參閱jQuery hide()一章節。

3.index()函式可以參閱jQuery index()一章節。 

4.Math.round()函式可以參閱javascript Math.round()一章節。 

5.click事件可以參閱jQuery click事件一章節。 

6.text()函式可以參閱jQuery text()一章節。 

7.show()函式可以參閱jQuery show()一章節。

相關文章