jQuery給表格添加分頁效果

2019-11-19 17:21:15

字體：大中小

來源：轉載

供稿：網友

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

1. 新建一個Table，添加十行數據

<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>關羽</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;//當前頁默認值為0  var pageSize = 3;//每一頁顯示的數目  $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);//總頁數   var $pager = $('<div class="page"></div>'); //新建div，放入a標簽,顯示底部分頁碼  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");   //觸發分頁函數   }).appendTo($pager);   $pager.append(" ");   }   $pager.insertAfter($table);   $table.trigger("paging");     //默認第一頁的a標簽效果   var $pagess = $('#pageStyle');   $pagess[0].style.backgroundColor="#006B00";   $pagess[0].style.color="#ffffff"; });  //a鏈接點擊變色，再點其他回復原色  function changCss(obj){  var arr = document.getElementsByTagName("a");  for(var i=0;i<arr.length;i++){  if(obj==arr[i]){ //當前頁樣式  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.好了，打開瀏覽器試試