如何在dataTable的单个单元格中添加多个json值

Posted 2023-05-07

【中文标题】如何在dataTable的单个单元格中添加多个json值

【英文标题】：How to add multiple json values in a single cell of dataTable

【发布时间】：2013-08-07 13:34:00

【问题描述】：

如何在 dataTable 的单个单元格中添加多个 json 值。 我正在浏览数据表文档，但找不到一个明确的例子。

我有以下 JSON 字符串，我通过会话将其访问到数据表中。

<textarea id="Report" type="text" style="" name="Report">
    [
    
    "Identifier": "0",
    "LastName": "Cooper",
    "FirstName": "Benny",
    "MiddleInitial": "P",
    "MRN": "7854753",
    "Age": "30",
    "Gender": "Female",
    "Location":
        
            "Bed": "1",
            "Room": "A",
            "unit": "NU1",
            "facility": "Fac1"
        ,
    "ServiceDate":"05/03/2013",
    "ChargeAndDx":"99222 - 410.01,428",
    "BillingProvider":"Palmer, James",
    "title":"Add",
    "start":"2013-08-07",
    "url":"#",
    "textColor":"red"
    ] </textarea>

在我正在访问数据表中的会话的其他页面上如下：

$(document).ready(function ()

var ReportData=JSON.parse(document.getElementById("Report").innerhtml);
        Report=$('#patientDataTables').dataTable
        (
            "bJQueryUI":true,
            "bScrollCollapse":true,
            aaData:patientReportData,
            "aoColumns":
                [   "mData":"LastName","sClass":"left",
                    "mData":"ServiceDate","sClass":"left",
                    "mData":"ChargeAndDx","sClass":"left",
                    "mData":"BillingProvider","sClass":"left",
                    "mData":"null","sClass":"center","sDefaultContent":"<a href='' class='editor_menu'>menu</a>"

                ]
        );

在出现 LastName 的数据表中，我还需要 FirtName、Middle Initial、MRN 和 age。

这是怎么做到的。如果有人知道一种快速的方法来做到这一点。

【参考方案1】：

在 DataTables 1.10.x 之前，您可以像这样使用mRender 参数：

"aoColumns":[   
   "mData":"LastName",
    "sClass":"left", 
    "mRender":function(data, type, full)
       return full.FirstName + full.LastName + full.MiddleInitial;
    
   ,
   "mData":"ServiceDate","sClass":"left",
   "mData":"ChargeAndDx","sClass":"left",
   "mData":"BillingProvider","sClass":"left",
   "mData":"null","sClass":"center","sDefaultContent":"<a href='' class='editor_menu'>menu</a>"
]

从 DataTables 1.10.x 开始，您可以像这样使用columns.render 属性：

"columns":[   
   "data":"LastName",
    "className":"left",
    "render":function(data, type, full, meta)
       return full.FirstName + full.LastName + full.MiddleInitial;
    
   ,
   "data":"ServiceDate","sClass":"left",
   "data":"ChargeAndDx","sClass":"left",
   "data":"BillingProvider","className":"left",
   "data":"null","className":"center","defaultContent":"<a href='' class='editor_menu'>menu</a>"
]

【讨论】：

感谢您的回复。在我等待响应之前，我厌倦了替代方案并克隆了 JSON 字符串。在单个对象/字段中获取 FirstName 和 LastName 以及 Middle 首字母，然后将其传递给 dataTable。但我会试试这个。这看起来很简单。

有效，但您应该使用“data”参数，使用您拥有的 JSON 数组的当前行设置，因为如果您有更多行已满，将包含所有对象，而不仅仅是当前行。谢谢

很好的答案！此外：如果您需要这些字段可搜索，您可以将它们添加到其他列中，参数“可见”为“假”，“可搜索”为“真”。这样，您将看到列中的所有数据，但仍可搜索。