时间戳

首页 > 解决方案 > 如何用 jQuery 中的 dataTables 替换标准引导表？

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

问题描述

我已经尝试并搜索了很多解决方案，但没有解决我的问题，即使在 dataTables 网站上也是如此。问题是如何使用 DataTables 在 json 中显示嵌套数组？下面的示例，如果我只想显示l3_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）

"<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" },
    ],
});

标签： javascriptjqueryarraysjsondatatables

解决方案

定义您的表格，包括tbodyHTML 中的所有内容，然后使用 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，这就是它不理解的原因。

推荐阅读