Jquery外掛-table sorter 使用教學

昨天正式用到Jquery外掛-table sorter做即時表單(表格)排序了

使用方法很簡單~~為了不放在腦子裡~就只好做筆記~想到再拿出來用@_@/

需配合JQUERY 1.21以上版本使用

外掛下載點 : 直接下載

步驟一：將以下程式碼貼於<header>與</header>之間

<!--導入JQUERY檔-->
<script type=text/javascript src="js/jquery.js"></script>

<!--導入JQUERY_TABLESORTER檔-->
<script type=text/javascript src="js/jquery.tablesorter.js"> </script>

<script id=js type=text/javascript>

//指定全部table
$("table").tablesorter();
//指定ID
//$("#table1").tablesorter();

</script>

步驟二：表格需注意語法

1.排序標題需使用 thead 配合 th 包覆

<table>

<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</thead>


<tr>
<td>Peter</td>
<td>Parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>

<td>Jul 6, 2006 8:14 AM</td>
</tr>
<tr>
<td>John</td>
<td>Hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>

<td>Dec 10, 2002 5:14 AM</td>
</tr>
<tr>
<td>Clark</td>
<td>Kent</td>
<td>18</td>
<td>$15.89</td>
<td>44%</td>
<td>Jan 12, 2003 11:14 AM</td>
</tr>
<tr>
<td>Bruce</td>
<td>Almighty</td>
<td>45</td>
<td>$153.19</td>
<td>44%</td>

<td>Jan 18, 2001 9:12 AM</td>
</tr>
<tr>
<td>Bruce</td>
<td>Evans</td>
<td>22</td>
<td>$13.19</td>
<td>11%</td>
<td>Jan 18, 2007 9:12 AM</td>
</tr>

</table>