前陣子製作「CSS 色碼英文名稱對照表一覽」時，需要一個 "讓表格能排序" 的功能，這樣讀者就能依照自己需求，針對不同欄位進行排序，如此查找資料非常方便，算是一個「友善的使用者體驗」。因此研究了一下網頁表格排序的功能，本篇記錄一下處理的心得，並將安裝方式整理成懶人包，有需要的讀者套用起來會很方便。
一、TableSorter 介紹
在所有 jQuery 表格排序外掛裡面，TableSorter 算是使用率最高的，而且擴充功能相當多(但不一定用得到)，因此本篇推薦這個工具。
1. 官網說明
進入上面這個官網連結後，也許讀者會看得很頭大，除了英文介面不容易看懂，其實版面設計對於想趕快安裝的人來說，需要花一番功夫才能理解，WFU 相信多數讀者很難成功地把這個工具裝起來。不過這仍然無法掩蓋作品的強大，因為作者真的把功能寫得很好。
如果安裝過「fancybox 燈箱」這類 jQuery 外掛，過程可能會遇上不少麻煩，因為得找免費空間自行上傳一大堆 js/css/jpg/gif 檔案 。
2. CDN
這個 TableSorter 也是同樣情形，還好 WFU 找到了「CDN 服務」，可直接引用所有相關外連，省下找空間的麻煩。
3. 表格排序效果
以「部落格會員系統」的資料為例，下面的表格為安裝了這個工具之後的效果，點擊標題欄位，即可針對各欄位進行排序：
| 權限 | 會員編號 | 暱稱 | 性別 | 註冊時間 |
|---|---|---|---|---|
| 加值會員 | 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 |
4. 額外功能
本篇的懶人包，雖然只有基本功能，不過相信已經能夠應付大部分的狀況。如有更多額外的需求，可參考官網的說明來下載額外的檔案、進行更多的操作。
同時也可參考這篇「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 碼之後，也就是該網頁、或該篇文章之中：
- <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.30.5/css/theme.blue.min.css"></link>
- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.30.5/js/jquery.tablesorter.min.js"></script>
- <script>
- $("#myTable").tablesorter({
- theme: "blue",
- widgets: ['zebra']
- });
- </script>
以下參數修改請參照以上程式碼行號：
A：可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jquery，以免重複安裝。
B：可根據前面的 CDN 頁面，選擇自己喜歡的 theme 連結。
F：如果 B 行 theme 選擇紅字的 blue，那麼此行也要設定同樣的串
G：使用斑馬條紋的隔行換色效果。
另外，使用某些佈景主題如果 CSS 效果不如預期，例如字體太小，請自行新增 CSS 參數覆蓋掉。
四、補充說明
前陣子寫過一篇「Blogger 插入表格的最佳流程 + 自適應寬度表格」，如果按照這篇的流程，產生出來的表格 HTML 碼，不會包含
按照該篇流程製作表格的讀者，可找到 <colgroup><col......</colgroup> 的區段，然後將這個區段的 HTML 碼，用「二、表格(Table)範例」→
五、新增功能
以下為 2018.5.31 新增及更新項目──
1. CDN 連結
將所有外連改成 CDN 連結，讓本篇更像懶人包。
2. 多欄排序功能教學
這個外掛內建多欄排序功能，但操作方式需要詳讀以下說明：
此外掛的初始狀態，見上圖，每個欄位右方為 "上下箭頭"，代表未排序狀態。
若要固定第一欄排序方式，請操作本篇的範例表格，先點擊第一欄「權限」，見上圖，原本的 "上下箭頭" 將變成單方向箭頭，代表遞增或遞減，持續點擊直到出現自己需要的排序方式。
第一欄排序方向固定之後，假設要根據第一欄、再來排序第二欄，從現在開始，請按住
以此類推，只要
3. 凍結特定區間不排序
這個功能不再官方外掛之中，但有網友寫了 TableSorter 的外掛(Static-Row)，可支援指定某行不進行排序。請參考以下網頁：
可從官網下載這個檔案 jquery.tablesorter.staticrow.min.js，或是把 js 內容直接塞到網頁上。
最簡單的操作方式：
- 不想排序的那一行，tr 標籤加上 class 名稱為 "static"
- 執行程式要設定 widgets，增加 "staticRow" 這個外掛
簡單附個執行方式範例：
$("#myTable").tablesorter({
theme: 'blue',
widgets: ['zebra', 'staticRow']
})更多「表格」使用技巧：
可以請問一下如果加入分頁功能，於第一頁按下排序紐，第二頁之後的分頁有辦法繼續排序銜接上一頁的嗎?
回覆刪除