DataTables 的固定表頭、 排名、 置中

先前寫的小程式 jesp 可以拿來把好幾個 csv 檔 join 在一起， 並且方便按照任何欄位排序。 其中表格資料好用的互動排序功能， 靠的就是 jQuery 的 DataTables 外掛。 兩年多前曾在 「jQuery 無痛讀檔」 裡初次使用； 現在重學一次， 並且選用幾個好用的效果。

一、 勾選套件決定 stylesheet 與 javascript 引用句

首先到 Download Builder 勾選你要的樣式/元件， 以決定要放哪幾句 stylesheet 跟 javascript 到你的 html 或 php 頁面裡。 如果只用最陽春的功能， 最簡單的勾法就是：

1. styling 勾 DataTables、
2. packages 勾 jQuery 3 跟 DataTables (當然， 如果你已另外引用 jQuery， 就不要勾 jQuery 3)、
3. Extension 不要勾選、
4. 下載方式選用預設的 CDN 分頁， 採用預設已勾選的 Minify (檔案較小) 跟 Concatenate (所有套件全部擠在同一個檔案裡)。

但因為我搜尋到的置中方式需要用 bootstrap (下詳)， 又因為想要固定表格第一列表頭 (下詳)， 所以最終我的選擇是：

1. styling 勾 bootstrap3、
2. packages 勾 jQuery3, Bootstrap3, DataTables、
3. Extension 勾 FixedHeaders、
4. 下載方式選用預設的 CDN 分頁， 照預設勾選 Minify 及 Concatenate

因為勾了 Concatenate， 所以最下面只產生兩句：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jq-3.3.1/dt-1.10.18/fh-3.1.4/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jq-3.3.1/dt-1.10.18/fh-3.1.4/datatables.min.js"><script>

把這兩句貼到 html/php 頁面， 然後就可以開始寫 DataTables 的程式了。

二、 基本靜態表格

我覺得 DataTables 的最佳學習起點是 清楚分門別類的範例程式。 先看一下 Basic Initialization 底下的 Zero configuration 跟 Feature enable/disable 兩個範例。 再根據你的資料來源， 選擇 Data sources 底下其中一個範例來看。 我的表格是用 php 在 server 端產生， 所以算是靜態的表格 => 看 HTML (DOM) sourced data 那個範例。 表格必須要有 id、 必須要有 thead 及 tbody。 以下假設 table 的 id 是 jesp_table。

三、 固定第一列表頭

超簡單， 只要剛才套件勾選對了， 那麼在啟用 datatables 時只要多傳一個選項， 像這樣：

$('#jesp_table').DataTable( {
  "paging": false,
  "fixedHeader": true,
} );

當瀏覽器的 scrollbar 往下拉時， 第一列表頭就會被鎖住， 方便閱讀。

四、 不要橫向填滿頁面、 要置中

DataTables 預設會讓表格橫向填滿整個頁面。 如果希望只用到最少的橫向空間， 且希望表格置中， 按照 這個問答， 在 css 裡設定一下就成功了：

#jesp_table {
   margin: auto;
   width: 50% !important;
}

但這個問答適用於 bootstrap 風格版， 所以當初選套件時要勾選 bootstrap 相關的選項。

五、 點一次先降序、 再點一次改升序排列

預設的使用者介面是： 欄位名稱點一次則將所有列以該欄升序排列 (由小到大) 再點一次改以降序排列。 可是我這個程式是寫來觀察股票用的 :-) (還有老師排學生的成績也是啊) 所以較常需要降序排列 -- 例如按照現金殖利率或按照 「截至 Q3 為止的季累 EPS」 由大到小排列。 每次都要點兩下有點麻煩。 搜尋到 這串討論， 只要在選項當中的 columnDefs 裡面加入以下設定即可：

{
  'orderSequence': ['desc', 'asc'],
  'targets': '_all'
}

六、 加一欄 「排名」

想要加一個 「排名」 欄， 直接讀出每筆資料的名次。 可是這個欄位跟其他欄位不太一樣： 資料列會因排序而改變順序； 這一欄卻要永遠顯示 1, 2, 3, ... 。 照著 這個範例 做， 除了設定 columnDefs 之外， 再加一小段 event handler 設定 (t.on('order.dt search.dt', ...)) 也很快就成功了。

七、 jesp

以最簡單單張試算表來說， 經常需要改用不同的欄位排序時， DataTables 的操作介面比試算表方便太多了。

其次， 在常見的較單純情況下 (大家都有相同的 primary key) 如果要整合 (join) 好幾幾張試算表， 那就先用 LibreOffice 把複雜的運算算完、 匯出成 csv， 再用我的 jesp 來顯示， 感覺很實用呵～ 而且其中有些 csv 檔還可以是來自動態更新的資料源 (例如所有個股每日收盤價)。

只是我的程式寫得太簡略， 忽略各種錯誤檢查， 所以當你不只改設定檔而且還改程式碼時， 會需要自己開 apache2 的 error log 跟瀏覽器的 javascript conole 來除錯 php 跟 javascript 程式。