這個工具是 Table view, FooTable:
https://fooplugins.github.io/FooTable/
很適合快速地將資料利用 table 的方式呈現出來, 這個工具的特點是同時可以分頁、搜尋、排序與編輯, 尤其在 mobile view (responsive) 時, 可以摺疊內容, 不用橫向捲動, 十分方便.
這裡將利用財金公司的國內銀行分行代碼表來進行示範, 原始資料在這裡:
https://www.fisc.com.tw/TC/Service?CAID=51254999-5d15-4ddf-8e54-4b2cdb2a8399
其中的”下載完整對照表”, “台幣匯款”, 可以下載完整的國內銀行總分支機構代碼(7碼)與名稱, 連結如下:
https://www.fisc.com.tw/tc/download/twd.txt
內容如上, 純文字檔, 不過請注意右下角的 Big5 編碼, 若要實作為 web 程式碼, 需要轉換為 UTF-8 (下面的程式碼使用 mb_convert_encoding 進行轉換).
接下來利用 FooTable 進行實作囉, 基礎程式碼如下:
$(document).ready(function() { $('.table').footable({ "paging": { "enabled": true, }, "filtering": { "enabled": true }, "sorting": { "enabled": true }, "columns": [{ "name": "id", "title": "id" }, { "name": "branch", "title": "branch", "breakpoints": "xs" }, { "name": "abbr", "title": "abbr" } ], "rows": $.get("twd.php"), }); });
簡單說明, paging, filtering, sorting 要設為 true, 而 columns 有三欄, 所以分別給定對應的欄位名(name)與欄位顯示(title), 其中 branch 有多加了 breakpoints: xs 代表著在 xs 時要摺疊, 也就是小畫面時, 會將此欄位收納起來. 而 rows 則為實際的資料, 這裡簡單使用一支 php 程式進行, 程式碼如下: