jQuery DataTable 隱藏列但保留數據獲取能力的實現

需求

DataTable 初始化配置中，需隱藏「商品編碼」列（productCode），但仍能在行點擊、導出等操作中獲取其值。

解決方案：CSS 類隱藏

在列定義中添加 sClass（或 className），再通過 CSS 隱藏：

"aoColumns": [
    { 'mDataProp': 'productCode', "bSortable": false, "sTitle": "商品編碼", "sClass": "hiddenCol" },
    { 'mDataProp': 'coverSmallImage', ... },
    ...
]

CSS 定義：

.hiddenCol {
    display: none;
}
/* 或 */
.hiddenCol {
    visibility: hidden;  /* 保留佈局空間 */
}

原理與優缺點

• 優點： 實現簡單，數據仍存在於 DataTable 內部模型（row().data() 可獲取），不影響排序、搜索、導出。
• 缺點： 列仍在 DOM 中，大數據量時微增渲染負擔；visibility: hidden 保留寬度可能影響佈局。

進階替代方案

1. columns.visible (DataTables 1.10+)：

   { data: 'productCode', visible: false, title: '商品編碼' }
   

   完全移除 DOM 節點，但內部數據模型保留，API 可訪問，性能更優。
2. 正交數據： 使用 render 返回不同顯示/排序/過濾數據，隱藏時返回空字符串。

總結

舊版 DataTable 使用 sClass + CSS display:none 兼容性好；新版（1.10+）強烈建議使用 visible: false 原生屬性，更語義化且性能更佳。兩種方式均滿足「隱藏但可取值」需求。