JQuery DataTable 是一個非常流行的開源工具，它可以使數據表格在網頁上的展示更加美觀，而且還可以對其中的數據進行多種操作。在這篇文章中，我們會簡單介紹一下 JQuery DataTable 的基本用法和效果。 首先，我們需要引用 JQuery 和 DataTable 的相關文件，代碼如下所示：

<link rel="stylesheet" type="text/css" href=" https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>

然后，我們需要在 HTML 文件中創建一張數據表格，代碼如下所示：

<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>123 Main St</td>
<td>Male</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>456 Oak Ave</td>
<td>Female</td>
</tr>
</tbody>
</table>

接下來，我們可以在 JavaScript 中初始化 DataTable 并設置一些屬性，例如分頁、搜索和排序等，代碼如下所示：

$(document).ready(function() {
$('#example').DataTable({
"paging": true,    // 開啟分頁
"searching": true, // 開啟搜索
"ordering": true   // 開啟排序
});
});

最后，我們可以看到已經成功地將一張普通的數據表格轉化為了一個強大而美觀的表格，效果圖如下所示：總之，使用 JQuery DataTable 可以為我們的數據表格添加多種操作和屬性，并且輕松地實現美觀的樣式效果。希望本篇文章能夠對大家有所幫助。