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

Posted 2023-05-08

【中文标题】如何用 jQuery 中的 dataTables 替换标准引导表？

【英文标题】：How to replace standard bootstrap table with dataTables in jQuery?

【发布时间】：2020-06-30 13:02:20

【问题描述】：

我已经尝试并搜索了很多解决方案，但没有解决我的问题，即使在 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" ,
    ],
);

【参考方案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，这就是它不理解的原因。

【讨论】：

我已经尝试了您的第二个选项，但我将 HTML 放在 JS 中，就像我上面的帖子一样，并在 JS 中使用 dataTables（根据您的建议）。所以我没有使用 。但是， 中的内容出现在 UI 中但没有出现数据，控制台日志中没有错误。 只是为了通知我在 json 中有多个嵌套数组。例如data: ['l1_task : ']['l2_task : ']['l3_task : '] 之后将达到[l3_id, l3_name, l3_description......] 我认为您需要将希望 DataTables 使用的数组命名为 "data" as it is in this example（单击表格下方的 Ajax 选项卡），或者使用 dataSrc 设置源DataTables 设置中的 ajax 对象中的属性 - example。 我都试过了，但没有解决。 :-( @mastersuse 您能否用您如何定义 dataSrc 和返回的数据样本更新问题（如果需要，更改敏感细节）？还要检查您是否确实以您期望的方式接收到来自服务器的响应。打开浏览器控制台并选择网络选项卡。触发 DataTables 请求（重新加载页面、单击按钮或其他），在 Network 选项卡中查找 Ajax 请求 URL，选择它，右侧的响应中应该是您的 JSON 数据。