快捷導(dǎo)航

jQuery給表格添加分頁效果

更新時間：2017年03月02日 09:10:38 作者：ChauncyWu

這篇文章主要為大家詳細(xì)介紹了利用jQuery給表格添加分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jQuery表格添加分頁的具體代碼，供大家參考，具體內(nèi)容如下

1. 新建一個Table，添加十行數(shù)據(jù)

<table cellspacing="0"> 
 <thead> 
 <tr> 
 <th>編號</th> 
 <th>姓名</th> 
 <th>性別</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>1</td> 
 <td>張飛</td> 
 <td>男</td> 
 </tr> 
 <tr> 
 <td>2</td> 
 <td>劉備</td> 
 <td>男</td> 
 </tr> 
 <tr> 
 <td>3</td> 
 <td>關(guān)羽</td> 
 <td>男</td> 
 </tr> 
 <tr> 
 <td>4</td> 
 <td>妲己</td> 
 <td>女</td> 
 </tr> 
 <tr> 
 <td>5</td> 
 <td>后羿</td> 
 <td>男</td> 
 </tr> 
 <tr> 
 <td>6</td> 
 <td>大喬</td> 
 <td>女</td> 
 </tr> 
 <tr> 
 <td>7</td> 
 <td>露娜</td> 
 <td>女</td> 
 </tr> 
 <tr> 
 <td>8</td> 
 <td>E.Z</td> 
 <td>男</td> 
 </tr> 
 <tr> 
 <td>9</td> 
 <td>琴女</td> 
 <td>女</td> 
 </tr> 
 <tr> 
 <td>10</td> 
 <td>貂蟬</td> 
 <td>女</td> 
 </tr> 
 </tbody> 
 
</table>

2. 引入jQuery 及script代碼

<script src="jquery-1.11.1.js"></script> 
<script> 
 $(function(){ 
 var $table = $('table'); 
 var currentPage = 0;//當(dāng)前頁默認(rèn)值為0 
 var pageSize = 3;//每一頁顯示的數(shù)目 
 $table.bind('paging',function(){ 
  $table.find('tbody tr').hide().slice(currentPage*pageSize,(currentPage+1)*pageSize).show(); 
 }); 
 var sumRows = $table.find('tbody tr').length; 
 var sumPages = Math.ceil(sumRows/pageSize);//總頁數(shù) 
 
 var $pager = $('<div class="page"></div>'); //新建div，放入a標(biāo)簽,顯示底部分頁碼 
 for(var pageIndex = 0 ; pageIndex<sumPages ; pageIndex++){ 
  $('<a href="#" rel="external nofollow" id="pageStyle" onclick="changCss(this)"><span>'+(pageIndex+1)+'</span></a>').bind("click",{"newPage":pageIndex},function(event){ 
  currentPage = event.data["newPage"]; 
  $table.trigger("paging"); 
  //觸發(fā)分頁函數(shù) 
  }).appendTo($pager); 
  $pager.append(" "); 
  } 
  $pager.insertAfter($table); 
  $table.trigger("paging"); 
  
  //默認(rèn)第一頁的a標(biāo)簽效果 
  var $pagess = $('#pageStyle'); 
  $pagess[0].style.backgroundColor="#006B00"; 
  $pagess[0].style.color="#ffffff"; 
}); 
 
//a鏈接點(diǎn)擊變色，再點(diǎn)其他回復(fù)原色 
 function changCss(obj){ 
 var arr = document.getElementsByTagName("a"); 
 for(var i=0;i<arr.length;i++){ 
 if(obj==arr[i]){ //當(dāng)前頁樣式 
 obj.style.backgroundColor="#006B00"; 
 obj.style.color="#ffffff"; 
 } 
 else 
 { 
 arr[i].style.color=""; 
 arr[i].style.backgroundColor=""; 
 } 
 } 
 } 
</script>

3. 另外，附上表格和底部分頁碼的css樣式

<style> 
 table{ 
 width:600px; 
 text-align:center; 
 } 
 table tr th,td{ 
 height:30px; 
 line-height:30px; 
 border:1px solid #ccc; 
 } 
 #pageStyle{ 
 display:inline-block; 
 width:32px; 
 height:32px; 
 border:1px solid #CCC; 
 line-height:32px; 
 text-align:center; 
 color:#999; 
 margin-top:20px; 
 text-decoration:none; 
 
 } 
 #pageStyle:hover{ 
 background-color:#CCC; 
 } 
 #pageStyle .active{ 
 background-color:#0CF; 
 color:#ffffff; 
 } 
</style>

4.好了，打開瀏覽器試試