jQuery Datatables 处理 Null 子对象答案

【问题标题】：jQuery Datatables Handle Null sub objectsjQuery Datatables 处理 Null 子对象
【发布时间】：2015-08-07 14:54:58
【问题描述】：

我正在使用 jQuery DataTables，但是当我的 JSON 子对象为 null 时遇到问题。我的 JSON 有一个嵌套对象 address，它可以是 null，因此下面的 address.streetAddress1 返回错误/警告。

DataTables 警告：表 id=directory-table - 请求第 0 行的未知参数“address.streetAddress1”。有关此错误的详细信息，请参阅http://datatables.net/tn/4

有没有办法处理null 值所以它只是一个空白字符串？

$(document).ready(function() {
    $('#directory-table').dataTable( {
        "lengthMenu": [ 10, 25, 50, 100 ],
        "dom": 'C<"clear">lfrtip',
        "ajax": {
            "url": "directory.json",
            "dataSrc" : ""
        },
        scrollX:true,
        "columns": [
            {"data" : "fileId"},
            {"data" : "fileName"},
            {"data" : "institutionId"},
            {"data" : "id"},
            {"data" : "firstName"},
            {"data" : "middleName"},
            {"data" : "lastName"},
            {"data" : "prefix"},
            {"data" : "suffix"},
            {"data" : "preferredName"},
            {"data" : "gender"},
            {"data" : "deleteFlag"},
            {"data" : "campusId"},
            {"data" : "buildingId"},
            {"data" : "primaryEmail"},
            {"data" : "secondaryEmail"},
            {"data" : "primaryPhone"},
            {"data" : "secondaryPhone"},
            {"data" : "address.streetAddress1"},
            {"data" : "address.city"},
            {"data" : "address.state"},
            {"data" : "address.zipCode"},
            {"data" : "orcid"},
            {"data" : "trResearcherId"},
            {"data" : "status.name"},
            {"data" : "roomNumber"},
            {"data" : "createdAt"},
            {"data" : "updatedAt"}
        ]
    } );
} );

这条记录有null 对应address：

{"fileId":2,"fileName":"9999_DIRECTORY.csv","institutionId":1,"id":"EVER1003","firstName":"George","lastName":"Clooney","middleName":null,"prefix":null,"suffix":null,"preferredName":null,"gender":"M","deleteFlag":"N","campusId":null,"primaryEmail":"cclooney","secondaryEmail":null,"primaryPhone":null,"secondaryPhone":null,"address":null,"buildingId":null,"orcid":null,"trResearcherId":null,"status":{"id":0,"name":"Processed"},"tags":null,"roomNumber":null,"createdAt":"2015-07-22 15:41 PM GMT","updatedAt":"2015-07-22 15:41 PM GMT"}

这条记录有一个address:

{"fileId":2,"fileName":"9999_DIRECTORY.csv","institutionId":1,"id":"EVER1013","firstName":"Monica","lastName":"Galler","middleName":null,"prefix":null,"suffix":null,"preferredName":null,"gender":"F","deleteFlag":"N","campusId":"CAMP1000","primaryEmail":"monica@gmail.com","secondaryEmail":null,"primaryPhone":null,"secondaryPhone":null,"address":{"id":0,"streetAddress1":"123 Fake Street","streetAddress2":null,"city":"Cincinnati","state":"OH","stateId":0,"zipCode":"32444"},"buildingId":null,"orcid":null,"trResearcherId":null,"status":{"id":0,"name":"Processed"},"tags":null,"roomNumber":null,"createdAt":"2015-07-23 14:31 PM GMT","updatedAt":"2015-07-24 18:18 PM GMT"}

【问题讨论】：

能否请您显示 JSON 中具有 NULL 值的部分？您使用的是什么版本的 DataTables？
我添加了示例 JSON。我使用的是 1.10.7 版本。

标签： javascript jquery json datatables

【解决方案1】：

使用columns.defaultContent 选项。

根据manual：

此外，此选项在加载 JSON 数据时很有用，因为如果发现 JSON 中的单元格值为null，则将使用此处设置的值（例如，您可以设置默认字符串“Not可用。”）。

例如：

        {"data" : "address.streetAddress1", "defaultContent": ""},
        {"data" : "address.city", "defaultContent": ""},
        {"data" : "address.state", "defaultContent": ""},
        {"data" : "address.zipCode", "defaultContent": ""},

【讨论】：

【解决方案2】：

使用 aoColumns 你可以指定一个 mRender 参数函数调用来检查有问题的值是否为空。例如：

$(document).ready(function() {
  $('#directory-table').dataTable( {
    "lengthMenu": [ 10, 25, 50, 100 ],
    "dom": 'C<"clear">lfrtip',
    "ajax": {
        "url": "directory.json",
        "dataSrc" : ""
    },
    scrollX:true,
    "aoColumns": [
        {"mData" : "fileId",
         "mRender": function( data, type, full) {
           if( data !== null ){
             return data;
           }
           else{
             return "";
           }
         },
         //More column definitions

http://legacy.datatables.net/usage/columns

【讨论】：