DataTable 是一個功能非常強大的 jQuery 插件，可以輕松實現(xiàn)數(shù)據(jù)表格的展示、排序、篩選、分頁、導(dǎo)出等功能。而使用 JSON 數(shù)據(jù)則是 DataTables 最流行的數(shù)據(jù)源，本文將介紹如何使用 DataTables 來展示 JSON 數(shù)據(jù)。

首先，需要引入 DataTables 的相關(guān)文件：

<link rel="stylesheet" type="text/css" >
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/datatables/1.10.19/js/jquery.dataTables.min.js"></script>

接著，需要準備好要展示的 JSON 數(shù)據(jù)，可以是一個對象數(shù)組，也可以是一個包含對象數(shù)組的 JSON 字符串。例如：

var data = [
{"name": "張三", "age": 18, "gender": "男"},
{"name": "李四", "age": 20, "gender": "女"},
{"name": "王五", "age": 22, "gender": "男"},
];

然后，就可以通過 DataTables 構(gòu)造函數(shù)來生成一個數(shù)據(jù)表格：

$(document).ready(function() {
$('#example').DataTable({
data: data,
columns: [
{title: "姓名", data: "name"},
{title: "年齡", data: "age"},
{title: "性別", data: "gender"}
]
});
});

其中，#example 是一個 div 標簽的 id，用于展示數(shù)據(jù)表格。data 屬性表示要展示的 JSON 數(shù)據(jù)，columns 屬性則定義了數(shù)據(jù)表格的列數(shù)及名稱。

最終，數(shù)據(jù)表格就可以正常地展示在頁面上了。