###### tags: `Datatables`

# 動態DataTables設置
應用在資料來源不固定包含欄位不固定，需要手動作動態更新情況下。
* 需要判斷當前Datatables實體是否已經有存在
* 如果有存在才要進行銷毀程序

以下語法出現**Datatable_ID**為HTML Table元件 ID屬性值

#### Step1. 判斷DataTables實體是否存在
關於Datatables $.fn.dataTable.isDataTable：
https://datatables.net/reference/api/%24.fn.dataTable.isDataTable()

if ($.fn.DataTable.isDataTable(Datatable_ID)) {}

**$.fn.DataTable.isDataTable(Datatable_ID)**
判斷當前Table是否為DataTable，如果是會回傳true，反之則回傳false。

#### Step2. 進行DataTables實體銷毀
關於Datatables destroy：
https://datatables.net/reference/api/destroy()

$(Datatable_ID).DataTable().destroy();

#### Step3. 建立DataTables空實體

$(Datatable_ID).empty();

#### Step4. 重新初始化DataTables

$(Datatable_ID).DataTable({
    destroy: true, //每一次修改時銷毀資料
    stateSave: false, //表格狀態保存，當頁面刷新時，是否要保存當前表格狀態，不保存狀態便會在刷新時回復到原始狀態
    autoWidth: false, //是否要自動調整表格寬度
    data: lsit_data,
    columns: list_columns
});

需要注意以下兩個參數：
* **data**：
此為Server端回傳的JSON資料，為每個欄位內的參數值集合，格式如下：

{
    'col_1':val1,
    'col_2':val2,
    'col_3':val3,
        .
        .
        .
}

從上面格式來看，可以理解欄位名稱為key，欄位內容為value

{
    key:value,
    key:value,
        .
        .
        .
}

* **columns**：
此為Server端回傳的JSON資料，產生DataTables所必要Columns清單包含處理格式，格式是以JSON(前端)或Dict(後端產生)，也就是告訴Datatable有幾個欄位，並且欄位名稱是什麼，格式如下：

{
    "data": "欄位名稱",
    "title": "欄位名稱"
},

從上面格式來看，可能會混亂掉為什麼兩者的value都是"欄位名稱"，實際上把它看成"title"=key、"data"=value，就會明白為甚麼會是這樣格式，key的命名都是固定的必須遵照"title"、"data"命名，因為這是Datatable預設格式。

範例：

假設透過ajax取得data_dict(欄位內資料)和list_columns(欄位資訊)

有一筆 data_dict 如下：

    {
        "Latitude": 18.00,
        "Longitude": 23.00,
        "Name": "Pune"
    }

有一筆 list_columns 如下：

    {
        "data": "Latitude",
        "title": "Latitude"
    },
    {
        "data": "Longitude",
        "title": "Longitude"
    },
    {
        "data": "Name",
        "title": "Name"
    },

當Datatables讀取第一筆data_dict時，根據內部的欄位資料，key值會跟list_columns內key:data相對應，那麼此data value就會知道要顯示在哪一個欄位內。
data_dict['Latitude'] --> list_columns['data']，知道要對應在哪一個欄位

完整語法
---
Html

<table id="demo_table" class="display table-bordered  table table-responsive  table-hover" style="width:100%;">
    <thead></thead>
</table>

JQuery

let Datatable_ID = "#demo_table";

$.ajax({
  url: "Your data required api",
  type: "POST",
  dataType: "json",
  data: JSON.stringify({
    arg1: val1,
    arg2: val2,
  }),
  success: function (res) {
    if ($.fn.DataTable.isDataTable(Datatable_ID)) {
      $(Datatable_ID).DataTable().destroy();
      $(Datatable_ID).empty();
    }

    $(Datatable_ID).DataTable({
      destroy: true, //每一次修改時銷毀資料序
      stateSave: false, //表格狀態保存，當頁面刷新時，是否要保存當前表格狀態，不保存狀態便會在刷新時回復到原始狀態
      autoWidth: false, //是否要自動調整表格寬度
      data: res.lsit_data,
      columns: res.list_columns,
    });
  },
  error: function (res) {},
});