jQuery排序功能設定

參考網址

1. 設定來源script
<script type="text/javascript" src="/path/to/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>

2.設定table 加入id、thead、tbody

<table id="myTable">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach@yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe@hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway@earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>


3.加入 script

$(document).ready(function()
{
$("#myTable").tablesorter();
}
);


4.完成
不過缺點是沒有像範例一樣漂亮
如果做成跟範例一樣好看的話請見下面這個範例


好看一點的範例

如果要改成跟範例一樣呢?
要改什麼東西

1.下載範例中的 style.css 放到你的網站目錄下
2.下載範例中的圖片 (請見 style.css 裡面的內容有三張小圖)
3.其它部分 javascript、HTML 請見範例 的設定說明