因此研究了一下網頁表格排序的功能,本篇記錄一下處理的心得,並將安裝方式整理成懶人包,有需要的讀者套用起來會很方便。
一、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 網址是無法外連的,請參照「WFU BLOG 外連 JS 變更及操作說明」,將這個連結下載後存成 JS 檔,上傳到自己的空間或 Dropbox。取得自己的 JS 檔外連後,置換本行的綠色網址字串。
AR:預設的效果會自動將表格隔行變換底色。如果希望底色一致不要換色,請將此行的紅色字串刪除即可。
四、補充說明
前陣子寫過一篇「Blogger 插入表格的最佳流程 + 自適應寬度表格」,如果按照這篇的流程,產生出來的表格 HTML 碼,不會包含
按照該篇流程製作表格的讀者,可找到 <colgroup><col......</colgroup> 的區段,然後將這個區段的 HTML 碼,用「二、表格(Table)範例」→
更多 jQuery 外掛:
沒有留言:
張貼留言注意事項:
◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。