哇寶部落格
Wabow Information Inc. Blog
原始網站：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 甚至可以實現分頁的功能。範例只用了最基本的效果；有興趣的人可以參考網站參數設定 的部分。
- Tags: jQuery
2 Responses to [jQuery Plugin] tablesorter 表格排序效果
jackie
四月 15th, 2009 at 2:27 下午
不错.
江郎才盡
四月 25th, 2010 at 2:37 上午
請教前輩，如果第一個TD是名次，不想要名字跟著其他欄位排序亂跑時要怎麼用呢？