- DataTable的官網：https://datatables.net/，CDN：https://cdn.datatables.net/。
- 下載完整範例：datatable_sample
- 引用CSS檔：<link rel=”stylesheet” type=”text/css” href=”https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css”>
- 先引用JQuery檔：<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
- 再引用JS檔：<script src=”https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js”></script>
- 建立表格，指定表格id(範例：table_id)，結構：<thead></thead>之間為欄位名，<tbody></tbody>之間為各列內容。
- 範例表格：
<table id=”table_id” class=”display”>
<thead>
<tr>
<th>欄位名稱1</th>
<th>欄位名稱2</th>
</tr>
</thead>
<tbody>
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
</tr>
</tbody>
</table> - 設定datatable參數，oLanguage：語言檔路徑、sPaginationType：分頁的形式、order：資料排序依據
- 語言檔下載：dataTables.zh-tw，要注意語言檔路徑，若未讀到語言檔，則會顯示預設語言(英文)。
- datatable參數範例：
var opt={
“oLanguage”:{“sUrl”:”dataTables.zh-tw.txt”},
“sPaginationType”:”full_numbers”,
“order”: [[ 0, ‘asc’ ]]
}; - 呼叫datatable：$(‘#table_id‘).DataTable(opt);
- 結果：
