2019年7月5日

讓 RWD 表格能自動排序

讓 RWD 表格能自動排序

Wayne Fu 0 A+
rwd-table-sort-scroll.jpg- RWD 表格能自動排序過去為網頁表格的處理寫了不少文章,例如「自適應 RWD 表格」、「讓網頁表格自動排序」。

後來發現,效果比較好的 RWD 表格,因為手機的表格形式跟網頁已經完全不一樣,那麼在行動版將無法做到自動排序。

有次無意間在手機看到 NBA 的統計數據表格,算是比較傳統的 RWD 表格形式,才想到這樣的 RWD 表格型態,就能夠進行排序了。

那麼本篇會提供範例程式碼,讓手機也能看到表格的排序效果。



一、能夠排序的表格型態


1. 各種方案

這部分的內容之前介紹過了,不過仍有必要再說明一次。自適應表格可以有幾種處理方式:

  1. 隱藏部分內容
  2. 讓表格出現水平捲軸
  3. 將橫向標題欄位改為直向,重新排版

這個網頁「Responsive Table」很詳細地整理了以上幾種解決方案,同時頁面上也可直接看到各種方案的即時展示效果,請切換頁簽即可。


2. 可以排序的表格型態

只有 1、2 這兩個形式可以藉由外掛來進行排序,也就是傳統的表格形式。而效果比較好的會是 2,使用水平捲軸,才不會遺失所有資訊。

但使用水平捲軸的版面效果沒那麼好,訪客很可能不知道畫面之外還有資訊,必須在畫面邊緣做處理,讓訪客知道還有沒看到的內容等待捲動。



二、範例效果


權限 會員編號 暱稱 性別 註冊時間 Email ID 聯絡電話 聯絡地址 購買項目 會員點數
加值會員W00001Wayne男生2014/9/12wayne@gmail.com1111111110912345678台北市信義區信義路五段1號Blogger015000
一般會員W00002Chen女生2014/9/17chen@gmail.com2222222220923456789台北市信義區信義路五段2號Blogger0250
一般會員W00003Ken男生2014/9/17ken@gmail.com3333333330934567890台北市信義區信義路五段3號Blogger03500
一般會員W00004Sung男生2014/9/17sung@gmail.com4444444440945678901台北市信義區信義路五段4號Blogger04100
一般會員W00005Liu男生2014/9/17liu@gmail.com5555555550912345678台北市信義區信義路五段5號Blogger0550

上面這個範例表格在網頁版會出現捲軸,訪客可知道要往右捲

也請用手機看這個表格的效果。


rwd-table-sort-scroll-1.jpg- RWD 表格能自動排序

行動版不會自動出現捲軸,因此表格右邊使用漸層透明的效果,暗示使用者可以往右捲看更多內容,這是很好的 RWD 設計。



三、範例程式碼


以下的表格範例程式碼,就是上面的範例表格,使用的外掛及原理跟「讓網頁表格能自動排序﹍TableSorter 安裝懶人包」一模一樣,因此注意事項請直接參考該篇的解說,此處不再詳細說明:

<div class="table_outer"><div class="table_scroll">
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>權限</th>
<th>會員編號</th>
<th>暱稱</th>
<th>性別</th>
<th>註冊時間</th>
<th>Email</th>
<th>ID</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><td>wayne@gmail.com</td><td>111111111</td><td>0912345678</td><td>台北市信義區信義路五段1號</td><td>Blogger01</td><td>5000</td></tr>
<tr><td>一般會員</td><td>W00002</td><td>Chen</td><td>女生</td><td>2014/9/17</td><td>chen@gmail.com</td><td>222222222</td><td>0923456789</td><td>台北市信義區信義路五段2號</td><td>Blogger02</td><td>50</td></tr>
<tr><td>一般會員</td><td>W00003</td><td>Ken</td><td>男生</td><td>2014/9/17</td><td>ken@gmail.com</td><td>333333333</td><td>0934567890</td><td>台北市信義區信義路五段3號</td><td>Blogger03</td><td>500</td></tr>
<tr><td>一般會員</td><td>W00004</td><td>Sung</td><td>男生</td><td>2014/9/17</td><td>sung@gmail.com</td><td>444444444</td><td>0945678901</td><td>台北市信義區信義路五段4號</td><td>Blogger04</td><td>100</td></tr>
<tr><td>一般會員</td><td>W00005</td><td>Liu</td><td>男生</td><td>2014/9/17</td><td>liu@gmail.com</td><td>555555555</td><td>0912345678</td><td>台北市信義區信義路五段5號</td><td>Blogger05</td><td>50</td></tr>
</tbody>
</table>
</div></div>
<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>
<style>
.table_outer {position: relative;}
.table_scroll{overflow-x: auto;}
.table_outer:after { content: ""; display: block; width: 100px; height: 100%; position: absolute; top: 0; right: 0; z-index: 1; background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 1) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0.7)), color-stop(100%, rgba(255, 255, 255, 1))); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 1) 100%); background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 1) 100%); background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 1) 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1); }
#myTable{margin-bottom: 0;}
#myTable * { white-space: nowrap; }
#myTable th:last-child { padding-right: 100px; }
</style>

比較特別的地方大致說明一下:

  • 為了讓表格標題、內容不斷行,CSS 必須加入 white-space: nowrap
  • 為了讓表格出現捲軸,Table 外面需要包一個 DIV,設定 overflow-x: auto
  • 為了讓表格右邊有 100px 寬的區塊,顯示漸層透明效果,外面還要再包一層 DIV,利用 position: absolute 設定「漸層透明區塊」的絕對位置
  • 為了不影響表格最後一欄的排序功能,最後一欄要加上 padding-right: 100px


更多「表格」使用技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

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

TOP