利用FooTable列出可分頁、搜尋、排序的資料檢視

這個工具是 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 程式進行, 程式碼如下:

header('Content-Type: application/json; charset=utf-8');
$datas = array();
$text = file_get_contents("https://www.fisc.com.tw/tc/download/twd.txt");
$text = mb_convert_encoding($text, "UTF-8", "BIG5");
$lines = explode(PHP_EOL, $text);
$linecount = count($lines);
for($i=0;$i<$linecount;$i++){
  $line = $lines[$i];
  array_push($datas, array(
    "id" => trim(mb_substr($line, 0, 7)),
    "branch" => trim(mb_substr($line, 8, 20)),
    "abbr" => trim(mb_substr($line, 28, 5))
  ));
}
echo json_encode($datas);

簡單說明, 首先要輸出 json 的結果, 所以使用了 header 設定 Content-Type: application/json, 取得內容使用 file_get_contents([url])進行, 不過實際程式碼有利用其他方式進行快取至本地, 來降低存取原始資料的重覆與降載, 再來利用 mb_convert_encoding 將原始的 BIG5 文字編碼轉為 UTF-8, 接下來是逐筆回填至 hash array, 最後利用 json_encode 將對應的 hash array 輸出即可:

這樣即可利用 FooTable 進行展示了, 範示在這裡:

https://sample.diary.tw/bankbranches/

於電腦寬版時, 會全部呈現, 在手機窄版時, 其中的 branch 欄位會因為之前的 breakpoints: xs 被摺疊起來:

利用旁邊的 + 號可以展開, 十分方便快速的一個資料展示的 table view 功能 – FooTable.

---

PS: 另外還有一組資料”「總分支機構位置」查詢一覽”是直接 UTF-8編碼與提供CSV格式的資料, 可以參考:

https://www.fisc.com.tw/TC/OpenDatas?Caid=ed820f3a-32d3-4a5b-8dcb-283dce06aae8&CaStyleId=6

「總分支機構位置」查詢一覽: https://www.fisc.com.tw/TC/OPENDATA/R2_Location.csv

大家也可以實作看看.

範例如下:

https://sample.diary.tw/bankbranches/location.php