[Javascript] HTML Table 加上分頁的功能 - jQuery-TablePage

HTML Table 分頁的 Plugin 網上也是很多，但個人滿喜歡 jQuery-TablePage 這一個的，它的功能很單純，而且程式碼簡單易懂，容易自己擴充，想了解分頁功能是如何實現的人，可以來研究看看喔~

使用方法如下：

// 引用 jQuery.js 和 jQuery-TablePage.js
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-tablepage.js"></script>

// 使用 TablePage 功能，參數1是放分頁的 HTML 物件，例如 span，參數2是每頁幾筆
$("#tbl").tablepage($("#table_page"), 5);

HTML Table 範例如下：

<table id="tbl" border="1">
    <thead>
  <tr >
   <th align="left" >Name</th>
   <th align="left" >Content</th>
  </tr>
    </thead>
 <tbody>
  <tr>
   <td>Name1</td>
   <td>Content1</td>
  <tr>
  <tr>
   <td>Name2</td>
   <td>Content2</td>
  <tr>
  <tr>
   <td>Name3</td>
   <td>Content3</td>
  <tr>
  <tr>
   <td>Name4</td>
   <td>Content4</td>
  <tr>
  <tr>
   <td>Name5</td>
   <td>Content5</td>
  <tr>
  <tr>
   <td>Name6</td>
   <td>Content6</td>
  <tr>
 </tbody>
</table>

// 放分頁的 HTML 物件
<span id='table_page'></span>

結果如下：

參考來源： jQuery-TablePage