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

我已经尝试并搜索了很多解决方案，但没有解决我的问题，即使是在dataTables网站上。问题是如何使用DataTables在json中显示嵌套数组？对于下面的示例，如果我只想显示

l3\u id:“1”

数据，该如何操作

我试图理解这个链接，但不是真正理解

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

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）

“”+
""+
""+
“ID”+
“活动名称”+
""+
""+
""+
$（“#Layer3Table”）.DataTable({
ajax:{
url:url\u项目\u详细信息“，
dataSrc：“数据”
},
栏目：[
{data:“l1_task.0.l2_task.0.l3_task.0.l3_id”}，
{data:“l1_task.0.l2_task.0.l3_task.0.l3_name”}，
],
});

或者定义表格，包括HTML中的所有

tbody

内容，然后使用DataTables启用搜索等功能。如果这样做，则无需设置url或列（尽管您仍然可以设置其他选项）

$（'#Layer3Table'）.DataTable（）；

或者，如果您想利用url和列功能，可以在HTML中创建基本的表结构

项目ID
项目名称
项目说明
项目状态

然后分别在JavaScript中设置数据表

$（'Layer3Table'）。数据表（{
ajax:{
url:url\u项目详细信息，
跨域：是的，
类型：“POST”，
cache:false，
数据类型：“json”，
contentType:“应用程序/json”，
dataSrc：“数据”，
},
栏目：[
{数据：“l3_id”，“类名”：“文本中心”}，
{数据：“l3_名称”，“类名”：“文本中心”}，
{数据：“l3_描述”，“类名”：“文本中心”}，
{数据：“l3_状态”，“类名”：“文本中心”}
],
});

---

你所做的似乎是在结果上循环，并为每个结果创建一个数据表，这就是它不理解的原因。

或者定义你的表，包括HTML中的所有

tbody

内容，然后使用数据表启用搜索等功能。如果这样做，你不需要设置url或列（尽管您仍然可以设置其他选项）

$（'#Layer3Table'）.DataTable（）；

或者，如果您想利用url和列功能，可以在HTML中创建基本的表结构

项目ID
项目名称
项目说明
项目状态

然后分别在JavaScript中设置数据表

$（'Layer3Table'）。数据表（{
ajax:{
url:url\u项目详细信息，
跨域：是的，
类型：“POST”，
cache:false，
数据类型：“json”，
contentType:“应用程序/json”，
dataSrc：“数据”，
},
栏目：[
{数据：“l3_id”，“类名”：“文本中心”}，
{数据：“l3_名称”，“类名”：“文本中心”}，
{数据：“l3_描述”，“类名”：“文本中心”}，
{数据：“l3_状态”，“类名”：“文本中心”}
],
});

---

你所做的似乎是在你的结果上循环，并为每个结果创建一个数据表，这就是为什么它不明白的原因。

我尝试了你的第二个选项，但我像上面的文章一样将HTML放在JS中，并在JS中使用数据表（如你的建议）。所以我没有使用。但是，中的内容显示在UI中，但数据没有显示，控制台日志中没有错误。只是通知我在json中有多个嵌套数组。例如

数据：['l1_任务：']['l2_任务：']['l3_任务：']

之后将到达

[{l3_id，l3_名称，l3_描述……]

我认为您需要命名希望DataTables用作

数据的数组（单击表下的Ajax选项卡），或者使用DataTables设置中Ajax对象中的
dataSrc
属性设置源。我已经尝试了这两种方法，但没有解决：-（@mastersuse您能否用您如何定义dataSrc和返回的数据样本（如有必要，请更改敏感详细信息）更新问题？同时检查您是否以预期的方式从服务器收到响应。打开浏览器控制台并选择“网络”选项卡。触发DataTables请求（重新加载页面，单击按钮或其他），在网络选项卡中查找Ajax请求URL，选择它，右侧的响应中应该是您的JSON数据。我尝试了您的第二个选项，但我像上面的帖子一样将HTML放在JS中，并在JS中使用dataTables（根据您的建议）。所以我没有使用。但是，中的内容显示在UI中，但数据没有显示，控制台日志中没有错误。只是通知我在json中有多个嵌套数组。例如
数据：['l1_任务：']['l2_任务：']['l3_任务：']
之后将到达
[{l3_id，l3_名称，l3_描述……]
我认为您需要命名希望DataTables用作
数据的数组（单击表下的Ajax选项卡），或者使用DataTables设置中Ajax对象中的
dataSrc
属性设置源。我已经尝试了这两种方法，但没有解决：-（@mastersuse您能否用您如何定义dataSrc和返回的数据样本（如有必要，请更改敏感详细信息）更新问题？同时检查您是否以预期的方式从服务器收到响应。打开浏览器控制台并选择“网络”选项卡。触发DataTables请求（重新加载页面，单击按钮或其他），在“网络”选项卡中查找Ajax请求URL，选择它并在resp中
"<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" },
    ],
});