Tad 教材網 - 線上書籍

:::

3-4 demo/index.php

4-1 index.php next

\[991\]PHP網站開發 進階應用技巧2
======================

[![](http://tad0616.net/uploads/dl.gif)](http://120.115.2.76/tad/tad_book3/file/9901/04.zip)

### 一、TinyTable V3官網

<http://www.leigeber.com/2009/11/advanced-javascript-table-sorter/>

### 二、基本結構

### 三、必要元件

<table border="1" cellpadding="1" cellspacing="1" width="500"> <tbody> <tr> <td><div id="tablenav"><select id="pagedropdown"></select></div>  
 <span id="currentpage"></span>  
 <span id="totalpages"></span>  
 <select id="columns" onchange="sorter.search('query')"></select>  
 <input type="text" id="query" onkeyup="sorter.search('query')" />  
 <span id="startrecord"></span>  
 <span id="endrecord"></span>  
 <span id="totalrecords"></span>  
 <a href="javascript:sorter.reset()">重來</a></td> <td>頁面選單  
 目前頁數  
 所有頁數  
 搜尋欄位  
 搜尋欄位值輸入框  
 目前的起始資料  
 目前的結束資料  
 所有資料筆數  
 回到初始狀態</td> </tr> </tbody> </table>

### 四、必要參數（請加在表格下方）

### 五、選用參數（可加在sortdir:1,之後）

<table border="1" cellpadding="1" cellspacing="1" width="500"> <tbody> <tr> </tr> <tr> <td>sum:\[4\],  
 avg:\[4,5\],  
 columns:\[{index:4, format:'$', decimals:0}\],</td> <td>加總  
 平均  
 顯示格式</td> </tr> </tbody> </table>

### 六、選用元件

<table border="1" cellpadding="1" cellspacing="1" style="width: 568px; height: 174px;"> <tbody> <tr> </tr> <tr> <td valign="top"><img src="tinytable/images/first.gif" alt="最前頁" onclick="sorter.move(-1,true)" />  
 <img src="tinytable/images/previous.gif" alt="上一頁" onclick="sorter.move(-1)" />  
 <img src="tinytable/images/next.gif" alt="下一頁" onclick="sorter.move(1)" />  
 <img src="tinytable/images/last.gif" alt="最後頁" onclick="sorter.move(1,true)" />  
 <a href="javascript:sorter.showall()">顯示全部</a>  
 <select onchange="sorter.size(this.value)">  
 <option value="5">5</option>  
 <option value="10" selected="selected">10</option>  
 <option value="20">20</option>  
 </select></td> <td valign="top">最前頁  
 上一頁  
 下一頁  
 最後頁  
 顯示全部  
 每頁秀出筆數選擇</td> </tr> </tbody> </table>

:::