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>
 

<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="#" 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>
 

<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>
 

點選頁碼可翻頁，成功！