對這文章發表回應
發表限制: 非會員 可以發表
發表者： 冷日 發表時間： 2011/8/17 8:35:03
原始網站：
http://tablesorter.com/docs/
表格一直是網頁呈現資料的最佳幫手，井然有序的將資料分門別類。但是如果僅由程式端對資料庫進行排序，在資料量並不多的情況下，無疑是對資料庫增加無謂的負擔；利用 JavaScript 對少量資料進行即時性的排序其實從以前就很常見，不過透過 jQuery 的幫助，
tablesorter 能更簡單的對表格進行排序，同時也能經由參數的設定，讓表格排序能更加靈活的呈現。
使用的方式非常簡單，一開始先設計一個 HTML 表格元件：
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>姓名</th>
<th>生日</th>
<th>身高</th>
<th>體重</th>
<th>三圍</th>
</tr>
</thead>
<tbody>
<tr>
<td>林志玲</td>
<td>1974-11-29</td>
<td>174cm</td>
<td>52kg</td>
<td>34C、24、36</td>
</tr>
<tr>
<td>隋棠</td>
<td>1981-10-22</td>
<td>172cm</td>
<td>48kg</td>
<td>33B、23、34</td>
</tr>
<tr>
<td>白歆惠</td>
<td>1982-10-23</td>
<td>175cm</td>
<td>50kg</td>
<td>33B、23、35</td>
</tr>
<tr>
<td>林嘉綺</td>
<td>1977-09-10</td>
<td>180cm</td>
<td>56kg</td>
<td>34D、25、35</td>
</tr>
</tbody>
</table>
接下來載入 jQuery 以及 tablesorter：
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
然後插入 JavaScript：
<script type="text/javascript">
$(function () {
// widgets: ['zebra'] 這個參數，能對表格的奇偶數列作分色處理
$("#myTable").tablesorter({widgets: ['zebra']});
});
</script>
呈現的效果如下：
其他還有很多參數可以設定，如預設排序、Ajax 加入表格等，另外搭配作者提供的
jquery.tablesorter.pager.js 甚至可以實現分頁的功能。範例只用了最基本的效果；有興趣的人可以參考
網站參數設定 的部分。
原文出處： [jQuery Plugin] tablesorter 表格排序效果 - 哇寶部落格