使用DataTables.net的Datatable功能

DataTables.net的Datatable是一個很方便的表格套件，支援自動分頁,搜尋,排序,移動,多國語言等功能，還支援伺服器端整合。已經滿足我們一般使用的絕大部分需求。當然DataTables.net也是有編輯器功能，但是這就是收費的範疇了。

下面就簡單入門一下Datatable

先準備一個標準html檔案

1. 放入你的table資料

Datatable需要有thead和tbody兩個部份，下面是一個可用的table資料範例

<table id="my-table" class="display">

<thead>

<tr>

<th>欄位抬頭1</th><th>欄位抬頭2</th><th>欄位抬頭3</th>

</tr>

</thead>

<tbody>

<tr><td>Peter</td><td>10</td><td>148</td></tr>

<tr><td>Mary</td><td>21</td><td>173</td></tr>

<tr><td>Jeff</td><td>51</td><td>181</td></tr>

<tr><td>Helen</td><td>31</td><td>165</td></tr>

</tbody>

</table>

2. head標籤內加入datatale的css

<link href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css" rel="stylesheet" />

3. 在body結尾標籤前面入javascript

因為datatable使用jquery所以我們連帶加入jquery，最後的ready函數則是為了對我們的表格進行初始化

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>

<script>

$(document).ready(function () {

$('#my-table').DataTable();

});

</script>

4. 完成