標籤: 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 程式進行, 程式碼如下: