javascript - 如何用 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 和列功能，请在 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 中单独设置数据表。

$('#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，这就是它不理解的原因。