2015年8月15日

讓網頁表格能自動排序﹍TableSorter 安裝懶人包

A+
web-table-sort-jquery-plugin前陣子製作「CSS 色碼英文名稱對照表一覽」時,需要一個 "讓表格能排序" 的功能,這樣讀者就能依照自己需求,針對不同欄位進行排序,如此查找資料非常方便,算是一個「友善的使用者體驗」。

因此研究了一下網頁表格排序的功能,本篇記錄一下處理的心得,並將安裝方式整理成懶人包,有需要的讀者套用起來會很方便。



一、TableSorter 介紹


在所有 jQuery 表格排序外掛裡面,TableSorter 算是使用率最高的,而且擴充功能相當多(但不一定用得到),因此本篇推薦這個工具。

1. 官網說明


進入上面這個官網連結後,也許讀者會看得很頭大,除了英文介面不容易看懂,其實版面設計對於想趕快安裝的人來說,需要花一番功夫才能理解,WFU 相信多數讀者很難成功地把這個工具裝起來。不過這仍然無法掩蓋作品的強大,因為作者真的把功能寫得很好。

如果安裝過「fancybox 燈箱」這類 jQuery 外掛,過程可能會遇上不少麻煩,因為得找免費空間自行上傳一大堆 js/css/jpg/gif 檔案 。

而這個 TableSorter 也是同樣情形,如果不想用本篇的懶人包,有辦法自行搞定免費空間的話,那麼可以參考「fancybox 燈箱」的安裝流程,自行從 TableSorter 官網下載相關檔案,並安裝 TableSorter。


2. 表格排序效果

以「部落格會員系統」的資料為例,下面的表格為安裝了這個工具之後的效果,點擊標題欄位,即可針對各欄位進行排序

權限 會員編號 暱稱 性別 註冊時間
加值會員W00001Wayne男生2014/9/12
一般會員W00002Chen女生2014/9/17
一般會員W00003Ken男生2014/9/17
一般會員W00004Sung男生2014/9/17
一般會員W00005Liu男生2014/9/17
一般會員W00006Don男生2014/9/18
一般會員W00007Chan女生2014/9/18
一般會員W00008Tung女生2014/9/18
一般會員W00009陳俊男生2014/9/18
一般會員W00010HY男生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 網址是無法外連的,請參照「WFU BLOG 外連 JS 變更及操作說明」,將這個連結下載後存成 JS 檔,上傳到自己的空間或 Dropbox。取得自己的 JS 檔外連後,置換本行的綠色網址字串。

AR:預設的效果會自動將表格隔行變換底色。如果希望底色一致不要換色,請將此行的紅色字串刪除即可



四、補充說明


前陣子寫過一篇「Blogger 插入表格的最佳流程 + 自適應寬度表格」,如果按照這篇的流程,產生出來的表格 HTML 碼,不會包含 <thead> 標籤,那麼本篇的工具就會失效。

按照該篇流程製作表格的讀者,可找到 <colgroup><col......</colgroup> 的區段,然後將這個區段的 HTML 碼,用「二、表格(Table)範例」→ <thead> ~ </thead> 這個格式的 HTML 碼取代,這樣就沒有問題了。


更多 jQuery 外掛:

2 則留言:

  1. 可以請問一下如果加入分頁功能,於第一頁按下排序紐,第二頁之後的分頁有辦法繼續排序銜接上一頁的嗎?

    回覆刪除
    回覆
    1. 不太清楚喔,你可能要啃一下官方說明書,看有沒有辦法套官方的語法或參數,自己寫出這樣的功能出來。

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。