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

分類
程式技術

[HTML5]data attributes大小寫問題

今天在實作 data-attributes 時, 發現僅能用小寫存取. 一般我們對於較長的變數名, 會使用駝峰命名法 (camel naming), 不過在 data-attributes 會發生問題.

因為在 data-attributes 這樣的結構下, 都是以小寫方式來進行存取, 所以即使是使用 data-numberOfData 也會使用 data(“numberofdata”) 的方式來存取, 否則會 undefined.

若希望能用駝峰式名稱來存取, 則需要使用 data-number-of-data 的方式來寫 tag, 就可以使用 data(“numberOfData”) 來存取.

可以參考以下程式:

<a id="linka" data-string="a">link a</a><br>
<a id="linkb" data-stringOfData="b">link b</a><br>
<a id="linkc" data-string-of-data="c">link c</a><br>

// jQuery javascript
document.write("#linka.data(\"string\") = " + $("#linka").data("string")+ "<br>");
document.write("#linkb.data(\"stringOfData\") = " +$("#linkb").data("stringOfData")+ "<br>");
document.write("#linkb.data(\"stringofdata\") = " +$("#linkb").data("stringofdata")+ "<br>");
document.write("#linkc.data(\"stringOfData\") = " +$("#linkc").data("stringOfData")+ "<br>");

上面的執行結果, 第二組會是 undefined, 其他可以正常輸出 data-attributes 內容.

可以參考 codepen 上的執行結果:
https://codepen.io/timhuang/pen/ZRYzOR

繼續閱讀:
https://stackoverflow.com/questions/20985204/does-jquery-internally-convert-html5-data-attribute-keys-to-lowercase