3-4 demo/index.php
4. 表格內容排序
一、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> |
最前頁 上一頁 下一頁 最後頁 顯示全部 每頁秀出筆數選擇 |
