March 09, 2023 | Created
# jQuery DataTables Header 對齊問題

## 框架
Vue2

## 狀況描述
載入頁面時，於 mounted 或 watch 週期， 呼叫 API 載入 Table，表格成功產生， 但 Header 寬未對齊內容 columns。

## 解決方式
### 方法一
不使用 .dataTable() 的方式產生 table，改在table中直接建立 thead 、tbody，並用 v-for 產生 tr 資料。

### 方法二
確認 table 區塊外層的 div 是否有使用 v-show 或 v-if 判斷。

若是用 v-if 判斷有無資料才顯示，則會影響 table 載入狀態，導致 Header 無法對齊；若只是用 v-show 判斷頁面權限是否顯示，則不會影響。

#### HTML

<div v-cloak>
    <div class="table-responsive">
        <table id="displayTable" class="table table-sm table-striped table-bordered table-hover text-nowrap text-center w-100"></table>
    </div>
</div>

#### JavaScript
##### 設定 DataTables 參數

setDataTableParams() {

  this.dataTableParams = {
      data: this.responseData,
      dom: `<"row my-2"<"container d-flex justify-content-between">B>
              <"row"<"col-sm-12" tr >>
              <"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>`,
      buttons: [
          {
              extend: 'excelHtml5',
              text: '下載',
              exportOptions: {
                  columns: [0, ':visible']
              },
          }
      ],
      columns: [
          { data: 'columns1', title: '欄位1' },
          { data: 'columns2', title: '欄位2', visible: false },
      ],
  };

}

##### 產生 DataTables

this.responseData = data;
this.setDataTableParams();

if (this.dataTable)
    this.dataTable.destroy();

this.dataTable = $('#displayTable').DataTable(
    Object.assign(new DatatableParameterGenerate(this.pageName), this.dataTableParams)
).columns.adjust();

###### tags: [`jquery`](https://hackmd.io/@elzuoc?tags=%5B%22jquery%22%5D) [`datatables`](https://hackmd.io/@elzuoc?tags=%5B%22datatables%22%5D) [`javascript`](https://hackmd.io/@elzuoc?tags=%5B%22javascript%22%5D) [`vue2`](https://hackmd.io/@elzuoc?tags=%5B%22vue2%22%5D)