无需AJAX调用，如何将JSON数据加载到DataTables并正常显示？

问题背景 #

使用最新版DataTables，基于.Net Framework 4.6.1项目，尝试将C#接口返回的JSON直接传入JavaScript加载到DataTables中（未使用AJAX调用），HTML表格渲染正常但数据无法显示，控制台无报错。模拟JSON数据测试仍存在相同问题。

初始测试代码 #

模拟JSON数据 #

var fakeJson =
{
    "data":
    {
        "Triggers": {
            "TriggerTypeId": 2,
            "TriggeredKeyId1": 499,
            "TriggerHelpText": "Blah blah blah",
            "TriggerActionDefinitionID": 2,
            "ComparisonOperatorID": 1
        },
        "Action": {
            "TaDescription":"this is an action description"
        },
        "Protocols": {
            "protocolDescription": "this is a protocol description"
        },
        "Operators": {
            "CODisplayText": "="
        }
    }
};

JavaScript代码 #

var dataSource = <%= DataTableJson %>;
dataString = JSON.stringify(dataSource);
dataSource = JSON.parse(dataString);

console.log(fakeJson.data.Triggers.TriggerHelpText);

var editor = new $.fn.dataTable.Editor({
    table: '#ProtocolTriggerTable',
    "data": fakeJson
    },
    fields: [{
        label: "Comparison",
        name: "data.Operators.CODisplayText",
        //type: "select"
     }, {
        label: "Action",
        name: "data.Action.TaDescription",
        //type: "select"
    }, {
        label: "Item",
        name: "data.Protocols.protocolDescription",
        //type: "select"
    }, {
        label: "Pop-up Text",
            name: "data.Triggers.TriggerHelpText",
        //type: "select"
    }]
});

$('#ProtocolTriggerTable').DataTable({
    dom: "rt",
    data: fakeJson,
    columns: [
        { data: "data.Operators.CODisplayText" },
        { data: "data.Action.TaDescription" },
        { data: "data.Protocols.protocolDescription" },
        { data: "data.Triggers.TriggerHelpText" }
    ],
});

HTML代码 #

<table border="1" id="ProtocolTriggerTable" class="display" style="background-color: #e0e0e0; width:100%;">
    <thead>
        <tr>
            <th style="width:20px !important"></th> 
            <th>Comparison</th>
            <th>Action</th>
            <th>Item</th>
            <th>Pop-up Text</th>
        </tr>
    </thead>
</table>

问题原因 #

DataTables的data参数要求接收数组类型的数据源，每条数组元素对应表格的一行数据；DataTables Editor的data参数同样需要数组格式的行数据。初始的JSON是嵌套对象结构，无法被识别为有效的行数据集合，因此表格无法渲染数据。

解决方法 #

调整JSON结构为数组格式，将单条数据包裹在数组中，同时修改JavaScript中columns和fields的路径，去掉外层的data.前缀：

修正后的JSON数据 #

var fakeJson =
[{
    "Triggers": {
        "TriggerTypeId": 2,
        "TriggeredKeyId1": 499,
        "TriggerHelpText": "Blah blah blah",
        "TriggerActionDefinitionID": 2,
        "ComparisonOperatorID": 1
    },
    "Action": {
        "TaDescription": "this is an action description"
    },
    "Protocols": {
        "protocolDescription": "this is a protocol description"
    },
    "Operators": {
        "CODisplayText": "="
    }
}];

对应修正的JavaScript代码片段 #

// 修正Editor配置
var editor = new $.fn.dataTable.Editor({
    table: '#ProtocolTriggerTable',
    data: fakeJson,
    fields: [{
        label: "Comparison",
        name: "Operators.CODisplayText"
     }, {
        label: "Action",
        name: "Action.TaDescription"
    }, {
        label: "Item",
        name: "Protocols.protocolDescription"
    }, {
        label: "Pop-up Text",
        name: "Triggers.TriggerHelpText"
    }]
});

// 修正DataTables配置
$('#ProtocolTriggerTable').DataTable({
    dom: "rt",
    data: fakeJson,
    columns: [
        { data: "Operators.CODisplayText" },
        { data: "Action.TaDescription" },
        { data: "Protocols.protocolDescription" },
        { data: "Triggers.TriggerHelpText" }
    ],
});

调整后，DataTables可以正确识别数组中的对象为表格行数据，从而正常渲染内容。

内容的提问来源于stack exchange，提问作者USMC6072