[筆記] jQuery DataTable 輸出 Excel 的設定調整初嘗試

章節連結

jQuery DataTable 套件搭配上 JZip 和其 Buttons 套件,可以方便輸出 Excel 的 XLSX 格式。這篇筆記下初次嘗試設定一些關於版面排列和設定的東西。
jQuery DataTable


需要相關套件

1. jQuery
2. jQuery DataTable
3. jQuery DataTable Buttons
4. jQuery DataTable Buttons HTML5


程式碼關鍵解析

運用 customize 參數中,寫進相關的 function 來操作用於解析的 DOM。其中可分為 3 塊:
Update Row – 將既有的 Row 資料,往下平移 X 層。相當於插入 X 條 Row 的意思
Update row > c – 雖說你把版型給調整好了,不過每一個格子 cell 對應的位置也需要跟著做改變
insert – 加入你想要的值,若以 Addrow(1, [{ k: ‘A’, v: ‘ColA’ }, { k: ‘B’, v: ” }) 為例,代表在 A1 插入 ColA, B1 插入 空白值
最後將既有的 innerHTML 進行替換就完成了。

若你不想要輸出網頁表頭 (Header) 的話,那要在 exportOptions 中的 format 裡的 header 設置為 null ( 預設為 * )


程式碼


參考資料

1. Demo 範例:http://live.datatables.net/lizidesu/1/
2. jQuery DataTable HTML5 export buttons

按讚加入粉絲團

延伸閱讀