前陣子製作「CSS 色碼英文名稱對照表一覽」時，需要一個 "讓表格能排序" 的功能，這樣讀者就能依照自己需求，針對不同欄位進行排序，如此查找資料非常方便，算是一個「友善的使用者體驗」。因此研究了一下網頁表格排序的功能，本篇記錄一下處理的心得，並將安裝方式整理成懶人包，有需要的讀者套用起來會很方便。
一、TableSorter 介紹
在所有 jQuery 表格排序外掛裡面，TableSorter 算是使用率最高的，而且擴充功能相當多(但不一定用得到)，因此本篇推薦這個工具。
1. 官網說明
進入上面這個官網連結後，也許讀者會看得很頭大，除了英文介面不容易看懂，其實版面設計對於想趕快安裝的人來說，需要花一番功夫才能理解，WFU 相信多數讀者很難成功地把這個工具裝起來。不過這仍然無法掩蓋作品的強大，因為作者真的把功能寫得很好。
如果安裝過「fancybox 燈箱」這類 jQuery 外掛，過程可能會遇上不少麻煩，因為得找免費空間自行上傳一大堆 js/css/jpg/gif 檔案 。
而這個 TableSorter 也是同樣情形，如果不想用本篇的懶人包，有辦法自行搞定免費空間的話，那麼可以參考「fancybox 燈箱」的安裝流程，自行從 TableSorter 官網下載相關檔案，並安裝 TableSorter。
2. 表格排序效果
以「部落格會員系統」的資料為例，下面的表格為安裝了這個工具之後的效果，點擊標題欄位，即可針對各欄位進行排序：
| 權限 | 會員編號 | 暱稱 | 性別 | 註冊時間 |
|---|---|---|---|---|
| 加值會員 | W00001 | Wayne | 男生 | 2014/9/12 |
| 一般會員 | W00002 | Chen | 女生 | 2014/9/17 |
| 一般會員 | W00003 | Ken | 男生 | 2014/9/17 |
| 一般會員 | W00004 | Sung | 男生 | 2014/9/17 |
| 一般會員 | W00005 | Liu | 男生 | 2014/9/17 |
| 一般會員 | W00006 | Don | 男生 | 2014/9/18 |
| 一般會員 | W00007 | Chan | 女生 | 2014/9/18 |
| 一般會員 | W00008 | Tung | 女生 | 2014/9/18 |
| 一般會員 | W00009 | 陳俊 | 男生 | 2014/9/18 |
| 一般會員 | W00010 | HY | 男生 | 2014/9/18 |
3. 額外功能
本篇的懶人包，雖然只有基本功能，不過相信已經能夠應付大部分的狀況。如有更多額外的需求，可參考官網的說明來下載額外的檔案、進行更多的操作。
同時也可參考這篇「tablesorter 表格排序效果」，提供了一些基本功能之外的操作範例。
二、表格(Table)範例
要讓這個工具生效，最好有基本的 HTML 知識，因為它只能在 "特定的 Table" 格式生效。如果你製作的 Table 表格 HTML 碼不符合格式，那麼程式不會發生作用。
以前面的「會員系統」表格為例，下面是 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>W00001</td><td>Wayne</td><td>男生</td><td>2014/9/12</td></tr>
<tr><td>一般會員</td><td>W00002</td><td>Chen</td><td>女生</td><td>2014/9/17</td></tr>
<tr><td>一般會員</td><td>W00003</td><td>Ken</td><td>男生</td><td>2014/9/17</td></tr>
<tr><td>一般會員</td><td>W00004</td><td>Sung</td><td>男生</td><td>2014/9/17</td></tr>
<tr><td>一般會員</td><td>W00005</td><td>Liu</td><td>男生</td><td>2014/9/17</td></tr>
<tr><td>一般會員</td><td>W00006</td><td>Don</td><td>男生</td><td>2014/9/18</td></tr>
<tr><td>一般會員</td><td>W00007</td><td>Chan</td><td>女生</td><td>2014/9/18</td></tr>
<tr><td>一般會員</td><td>W00008</td><td>Tung</td><td>女生</td><td>2014/9/18</td></tr>
<tr><td>一般會員</td><td>W00009</td><td>陳俊</td><td>男生</td><td>2014/9/18</td></tr>
<tr><td>一般會員</td><td>W00010</td><td>HY</td><td>男生</td><td>2014/9/18</td></tr>
</tbody></table>主要有兩點要注意：
- Table 標籤必須加上紅色字串，設定 id 及 class
- 請注意綠色字串
<thead> ~</thead> 的區間，一般的 Table 表格不一定會用到 thead 標籤，但這個工具一定要設定 thead 標籤才行。
為了讓程式能正常執行，建議可以拿以上 HTML 碼來進行修改，會比較保險。
三、安裝程式碼
大部分情形下，jQuery 外掛多半安裝在範本之中。不過 WFU 認為表格排序的功能不常用到，如果裝在範本中，會導致每個網頁都執行這個外掛，對於網頁執行效率是一種浪費。
因此建議要用到表格排序的網頁、或該篇文章，再安裝這個工具即可！那麼以下的程式碼，請放在你的表格 HTML 碼之後，也就是該網頁、或該篇文章之中：
以下參數修改請參照以上程式碼行號：
A：可參考「如何使用jQuery版本」，檢查範本是否已安裝過 jquery，以免重複安裝。
B~AO：可自行修改 CSS 參數，調整版面效果。
AP：由於過去發生「Google Drive(js檔)流量限速」的情形，為了避免將來某天這個小工具無預警罷工，建議讀者有空的時候，參考以上文章連結，自行將綠色字串的 js 檔分流，並用「Google Drive 外連產生器 V2」取得外連網址。
AR：預設的效果會自動將表格隔行變換底色。如果希望底色一致不要換色，請將此行的紅色字串刪除即可。
四、補充說明
前陣子寫過一篇「Blogger 插入表格的最佳流程 + 自適應寬度表格」，如果按照這篇的流程，產生出來的表格 HTML 碼，不會包含
按照該篇流程製作表格的讀者，可找到 <colgroup><col......</colgroup>的區段，然後將這個區段的 HTML 碼，用「二、表格(Table)範例」→
更多 jQuery 外掛：