# Jquery套件-Datatables
###### tags: `實作功能`

### 下載安裝方法

### Datatables套件
可排序，[套件網址](https://datatables.net/)

### 實作後出現過以下錯誤
`Datatables: Cannot read property 'mData' of undefined`

Google 查詢錯誤訊息後
> dataTables requires a well formed table. It must contain \<thead> and \<tbody>tags, otherwise it throws this error. Also check to make sure all your rows including header row have the same number of columns.
[原文網址](https://stackoverflow.com/questions/25377637/datatables-cannot-read-property-mdata-of-undefined)

中文意思
dataTables需要一個格式正確的表。它必須包含\<thead>和\<tbody>標記，否則將引發此錯誤。還要檢查以確保所有行（包括標題行）的列數均相同。

### 實作
引入套件

<link rel="stylesheet" type="text/css" href="~/Content/dataTables.bootstrap.min.css" />
<script type="text/javascript" src="~/Scripts/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="~/Scripts/dataTables.bootstrap.min.js"></script>

<script>    
    $(document).ready(function () {
        $('#table').DataTable({
            "language": { "url": "../Content/Plugins/dataTables.Chinese-traditional.json" }
        });
    });
</script>

HTML

<table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
        </tbody>
</table>

---

## 完整 Code ( 更新於 2020.7.3 )

function SetDatatables(elementId) {
    // "#" + elementId + "" => 動態賦予 ID 方法
    let table = $("#" + elementId + "").DataTable({
        // ※特別注意 : retrieve 和 destroy 不可以一起使用，會有無法預期的錯誤。
        // retrieve: 如果 id = table 的 Table 已經建置過，又被呼叫，此參數會避免再次初始化，回傳剛剛建置的 Table。
        // ※注意：這無法在重新初始化重設參數
        retrieve: true,
        // destroy: 如果 id = table 的 Table 已經建置過，又被呼叫，此參數會移除舊有的 Table 建置，讓你重新初始化一次。
        // ※注意：因為用到初始化會用到大量程式碼，可能影響效能。例如: 動態啟用和禁用功能
        //destroy: true,
        // 隱藏搜尋元件
        searching: false,
        // url 設定中文語系，emptyTable 沒資料的時候顯示的字樣
        language: { "url": "../Scripts/Datatables/dataTables.Chinese-traditional.json", "emptyTable": "沒有資料" },
        // 決定顯示幾筆資料的選單內容
        lengthMenu: [10],
        // 隱藏決定顯示幾筆資料的選單
        lengthChange: false,
        // 不可以案欄位標題排序
        ordering: false,
        //// 設置依欄位位置列寬
        //// Html Table 的 Style 記得要設 width:100%
        //columnDefs: [
        //    { "width": "20%", "targets": 0 },
        //    { "width": "20%", "targets": 1 },
        //    { "width": "20%", "targets": 2 },
        //    { "width": "20%", "targets": 3 },
        //    { "width": "10%", "targets": 4 }
        //],
        //// 自動寬度
        //autoWidth: false,
    });
}

---

[官方語言插件說明文件](https://datatables.net/plug-ins/i18n/)
※記得要將語系檔存成 UniCode 編碼，不然會出現亂碼，[改法參閱此筆記](https://hackmd.io/W_BQ8s4SSFKU-ynVIS9aAQ#Datatables-%E4%BD%BF%E7%94%A8%E8%AA%9E%E8%A8%80%E6%8F%92%E4%BB%B6%E8%AE%8A%E6%88%90%E4%BA%82%E7%A2%BC)

#### 過程中遇到問題 - 因為 Call 同個頁面，再次呼叫初始化 DataTable 時報錯

參照[官方文件](https://datatables.net/manual/tech-notes/3)解: 看紅線框起來的範圍