[jQuery Plugin] tablesorter 表格排序效果

分類: jQuery|技術分享 作者: daniel

31 3 月 2009

DEMO

原始網站: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>

呈現的效果如下:tablesorter 呈現效果

範例程式下載

其他還有很多參數可以設定,如預設排序、Ajax 加入表格等,另外搭配作者提供的 jquery.tablesorter.pager.js 甚至可以實現分頁的功能。範例只用了最基本的效果;有興趣的人可以參考網站參數設定 的部分。

1 Response to [jQuery Plugin] tablesorter 表格排序效果

Avatar

江郎才盡

4 月 25th, 2010 at 2:37 上午

請教前輩,如果第一個TD是名次,不想要名字跟著其他欄位排序亂跑時要怎麼用呢?

我要留言

關於這裡

這個部落格分享了哇寶在電子商務領域的技術及資訊,希望能讓更多人一起為台灣的網路產業加油。