【筆記】DataTable 搭配 Bootstrap Tab 時依據客製化 css 調整欄位寬度

使用情境：
jQuery v3.3.1
DataTable v1.10.19
Bootstrap v4.2.1

由於需客製化樣式，因此合作的美工使用 css 及 js 來調整 table 內文字的大小及樣式，結果造成某些情境下 table 的 head 欄寬與 body 欄寬不同，使得使用者在閱讀上出現困難。
 以下是我現在解決此問題的筆記。

 
單純解決欄寬對齊的問題並不難，只需要呼叫這支 api 即可。
以下程式碼以

var table = $("#table_id").DataTable(); //table_id請自行換為欲調整table之id

為前提。由於 DataTable 無法重新進行初始化，所有調整請盡量用這個變數來呼叫，不要重新呼叫 DataTable()。

在所有調整樣式的 js 程式碼都被呼叫過後，加入一行

table.columns.adjust();

欄寬即會自動調整對齊，若是有需要動態調整 css，則在每次調整後重新呼叫此 api 即可。

然而問題在於 table 沒有出現在畫面上時，呼叫以上 api 無法作用，需於 element 出現在畫面上的同時再次呼叫。

於是我們參考 Bootstrap 的官方文件了解如何於 element 出現時執行 function。
官方文件中的程式碼如下

$('#myCollapse').on('shown.bs.collapse', function (e) {

  // Action to execute once the collapsible area is expanded

})

只要將 element 替換為會影響 table 出現的 element 即可。

然而標籤與 table 可能會有很多個，於是我們可以一次綁定所有的標籤。

 $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){

        table.columns.adjust(); //也可將table都放入array一次調整

});

如此一來，當切換標籤使 table 出現的同時，欄寬也會被調整。

以上是今天的紀錄。

References:
https://datatables.net/reference/api/columns.adjust()
https://stackoverflow.com/questions/17237812/datatable-jquery-table-header-width-not-aligned-with-body-width
https://getbootstrap.com/docs/4.1/getting-started/javascript/#asynchronous-functions-and-transitions