JQuery Datatables 樹是基于 JQuery Datatables 的一個擴展，可以用于顯示層次結構數據。

要使用 JQuery Datatables 樹，需要先引入必要的文件，除了 JQuery 和 Datatables 的文件，還需要引入“jquery.dataTables.js”和“jquery.dataTables.tree.js”兩個文件：

<!-- 引入 Datatables 核心文件 -->
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<!-- 引入 Datatables 樹擴展 -->
<script src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js"></script>
<script src="https://cdn.datatables.net/treegrid/1.0.1/js/dataTables.treeGrid.min.js"></script>

然后就可以定義一個表格，通過“treeGrid”選項來啟用樹形結構，并指定子節點和父節點的 ID 所在的列：

$('#example').DataTable({
ajax: '/data.json',                // 數據源
columns: [                         // 列定義
{data: 'name'},                // 名稱
{data: 'position'},            // 職位
{data: 'office'},              // 辦公室
{data: 'start_date'},          // 開始日期
{data: 'salary'},              // 薪水
{data: 'id', visible: false},  // ID
{data: 'parent_id', visible: false}  // 父節點 ID
],
order: [ [6, 'asc'], [5, 'asc'] ], // 默認排序
treeGrid: {
expandIcon: '<i class="fa fa-plus-square"></i>',  // 展開圖標
collapseIcon: '<i class="fa fa-minus-square"></i>',// 折疊圖標
indentation: 20,                  // 縮進
levelIndentation: 20,             // 不同層次縮進
treeColumn: 0,                    // 樹形列
parentIdColumn: 'parent_id'       // 父節點列
},
rowGroup: {
dataSrc: 'office'                // 分組依據
}
});

其中，“expandIcon”和“collapseIcon”選項可以指定展開和折疊的圖標，可以使用 Font Awesome 等圖標庫中的圖標。

最后，需要在頁面中添加一個表格，例如：

<table id="example" class="table table-striped table-bordered"></table>

這樣就可以顯示一個帶樹形結構的表格了。