線上書籍

一、TinyTable V3官網

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

二、基本結構

<link rel="stylesheet" href="tinytable/tinytable.css" />
<table id="my_table" class="tinytable">
    <thead>
      <tr>
        <th class="nosort"><h3>編號</h3></th>
        <th><h3>開課單位</h3></th>
        <th><h3>學程</h3></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>
    </tbody>
  </table>

三、必要元件

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

頁面選單 目前頁數 所有頁數 搜尋欄位 搜尋欄位值輸入框 目前的起始資料 目前的結束資料 所有資料筆數 回到初始狀態

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

<script type="text/javascript" src="tinytable/script.js"></script>
<script type="text/javascript">
var sorter = new TINY.table.sorter('sorter','my_table',{
headclass:'head',
ascclass:'asc',
descclass:'desc',
evenclass:'evenrow',
oddclass:'oddrow',
evenselclass:'evenselected',
oddselclass:'oddselected',
paginate:true, size:10,
colddid:'columns',
currentid:'currentpage',
totalid:'totalpages',
startingrecid:'startrecord',
endingrecid:'endrecord',
totalrecid:'totalrecords',
hoverid:'selectedrow',
pageddid:'pagedropdown',
navid:'tablenav',
sortcolumn:0,
sortdir:1,
init:true
});
</script>

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

sum:[4], avg:[4,5], columns:[{index:4, format:'$', decimals:0}],	加總 平均 顯示格式

六、選用元件

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

最前頁 上一頁 下一頁 最後頁 顯示全部 每頁秀出筆數選擇