2015年8月1日 星期六

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

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

Wayne Fu 0 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 外掛:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP