如何用 jQuery 中的 dataTables 替换标准引导表？

Question

我已经尝试并搜索了很多解决方案，但没有解决我的问题，即使在 dataTables 网站上也是如此。问题是如何使用 DataTables 在 json 中显示嵌套数组？下面的例子，如果我只想显示l3_id: "1" 数据怎么办。

我试图理解这个链接，但并不真正理解。 Example

控制台和网络选项卡没有错误。

DataTable 不出现，包括搜索框、分页等dataTables 功能。 （CDN/库已导入）

JSON

{
    "data": [
        {
            "project_id": "1",
            "l1_task": [
                {
                    "l1_id": "1",
                    "l2_task": [
                        {
                            "l2_id": "1",
                            "l3_task": [
                                {
                                    "l3_id": "1",
                                    "l3_name": "My name"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

JS（我在JS中应用HTML）

"<table id='Layer3Table' class='table dt-responsive nowrap' style='width:100%'>"+
    "<thead>"+
        "<tr>"+
            "<th class='text-center'>ID</th>"+
            "<th class='text-center'>Activity Name</th>"+
        "</tr>"+
    "</thead>"+
"</table>"+

$('#Layer3Table').DataTable({
    ajax: { 
        url: url_project_detail",
        dataSrc : "data"
    },
    columns: [
        { data : "l1_task.0.l2_task.0.l3_task.0.l3_id" },
        { data : "l1_task.0.l2_task.0.l3_task.0.l3_name" },
    ],
});

Answer 1

要么定义你的表格，包括 HTML 中的所有tbody 内容，然后使用 DataTables 来启用搜索等功能。如果您这样做，则无需设置 url 或列（尽管您仍然可以设置其他选项）。

$('#Layer3Table').DataTable();

或者如果你想利用 url 和 column 特性，在 HTML 中创建基本的表结构

<table id='Layer3Table' class='table dt-responsive nowrap' style='width:100%'>
    <thead>
        <tr>
            <th class='text-center'>Project ID</th>
            <th class='text-center'>Project Name</th>
            <th class='text-center'>Project Description</th>
            <th class='text-center'>Project Status</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

然后在 JavaScript 中单独设置您的 DataTable。

$('#Layer3Table').DataTable( {
    ajax: { 
        url: url_project_detail,
        crossDomain : true,
        type : "POST",
        cache : false,
        dataType : "json",
        contentType: "application/json",
        dataSrc : "data",
    },
    columns: [
        { data : "l3_id", "className": "text-center" },
        { data : "l3_name", "className": "text-center" },
        { data : "l3_description", "className": "text-center" },
        { data : "l3_status", "className": "text-center" }
    ],
});

您似乎在做的是循环您的结果并为每个结果创建一个 DataTable，这就是它不理解的原因。