将 Json 对象加载到数据表中（ajax）答案

【问题标题】：Loading Json object into datatable (ajax)将 Json 对象加载到数据表中（ajax）
【发布时间】：2017-02-19 17:57:42
【问题描述】：

我想使用 JSON 对象构建数据表，但收到以下错误：

之后，浏览器显示：

我一直在尝试警告消息中的 url 所说的一切。但我没有弄清楚。

JSON 对象由名为 MyJson 的 servlet 检索。这个 JSon 具有以下外观。

{
    "data":[
        ["NAME: Name1","DIRECTION: Salida","CHARGED: 15","AFFORDED: 15"],
        ["NAME: Name2","DIRECTION: Salida","CHARGED: 4","AFFORDED: 4"],
        ["NAME: Name3","DIRECTION: Entrada","CHARGED: 4","AFFORDED: 4"],
        ["NAME: Name4","DIRECTION: Salida","CHARGED: 1","AFFORDED: 0"],
        ["NAME: Name5","DIRECTION: Entrada","CHARGED: 15","AFFORDED: 15"],
        ["NAME: Name6","DIRECTION: Entrada","CHARGED: 10","AFFORDED: 10"],
        ["NAME: Name7","DIRECTION: Entrada","CHARGED: 15","AFFORDED: 15"],
        ["NAME: Name8","DIRECTION: Entrada","CHARGED: 3","AFFORDED: 3"],
        ["NAME: Name9","DIRECTION: Entrada","CHARGED: 15","AFFORDED: 15"]
    ]
}

这是我的javascript

<script>

$(document).ready(function() {    
    var tableEntityList = $('#testable').DataTable({        
        "processing": true,
        "scrollY":"500px",
        "scrollCollapse": true,
        "paging":false,
        "serverSide":true,
        "ajax":"./MyJson",
        "columns": [
            { "data":'NAME' },
            { "data":'DIRECTION' },
            { "data":'CHARGED' },
            { "data":'AFFORDED' }   
        ]
    });
})
</script>

<body>

<table class="display responsive nowrap" id="testable" cellspacing="0">
<thead>
<th>NAME</th>
<th>DIRECTION</th>
<th>CHARGED</th>
<th>AFFORDED</th>
</thead>
<tbody>
</tbody>

</table>

你能告诉我我做错了什么吗？

谢谢。

【问题讨论】：

标签： javascript jquery json datatables

【解决方案1】：

您需要在将数据传递给 DataTables 之前对其进行处理，您可以在 dataSrc 中执行此操作。检查这个JSFiddle：

let jsonData = {
    "data": [
        ["NAME: Name1", "DIRECTION: Salida", "CHARGED: 15", "AFFORDED: 15"],
        ["NAME: Name2", "DIRECTION: Salida", "CHARGED: 4", "AFFORDED: 4"],
        ["NAME: Name3", "DIRECTION: Entrada", "CHARGED: 4", "AFFORDED: 4"],
        ["NAME: Name4", "DIRECTION: Salida", "CHARGED: 1", "AFFORDED: 0"],
        ["NAME: Name5", "DIRECTION: Entrada", "CHARGED: 15", "AFFORDED: 15"],
        ["NAME: Name6", "DIRECTION: Entrada", "CHARGED: 10", "AFFORDED: 10"],
        ["NAME: Name7", "DIRECTION: Entrada", "CHARGED: 15", "AFFORDED: 15"],
        ["NAME: Name8", "DIRECTION: Entrada", "CHARGED: 3", "AFFORDED: 3"],
        ["NAME: Name9", "DIRECTION: Entrada", "CHARGED: 15", "AFFORDED: 15"]
    ]
};

$(document).ready(function() {
    var tableEntityList = $('#testable').DataTable({
        "processing": true,
        "scrollY": "500px",
        "scrollCollapse": true,
        "paging": false,
        "ajax": {
            type: 'POST',
            dataType: 'json',
            url: '/echo/json/',
            data: {
                json: JSON.stringify(jsonData)
            },
            dataSrc: function(json) {
                var properData = [];
                $.each(json.data, function(k, v) {
                    var returnObject = {};
                    $.each(v, function(a, b) {
                        var elArr = b.split(":");
                        returnObject[elArr[0].trim()] = elArr[1].trim()
                    });
                    properData.push(returnObject)
                });
                return properData;
            }
        },
        "columns": [{
            "data": 'NAME'
        }, {
            "data": 'DIRECTION'
        }, {
            "data": 'CHARGED'
        }, {
            "data": 'AFFORDED'
        }]
    });
});

请注意，serverSide 不起作用！

【讨论】：

【解决方案2】：

如果您使用columns.data，则意味着您的 JSON 数组应该已经有字段映射到各自的字段名称 NAME、DIRECTION、CHARGED 和 AFFORDED，如下所示：

var dataSet = [
    { "NAME": "Name1", "DIRECTION": "Salida",  "CHARGED": 15, "AFFORDED": 15 },
    { "NAME": "Name2", "DIRECTION": "Salida",  "CHARGED": 4,  "AFFORDED": 4 },
    { "NAME": "Name3", "DIRECTION": "Entrada", "CHARGED": 4,  "AFFORDED": 4 },
    { "NAME": "Name4", "DIRECTION": "Salida",  "CHARGED": 1,  "AFFORDED": 0 },
    { "NAME": "Name5", "DIRECTION": "Entrada", "CHARGED": 15, "AFFORDED": 15 },
    { "NAME": "Name6", "DIRECTION": "Entrada", "CHARGED": 10, "AFFORDED": 10 },
    { "NAME": "Name7", "DIRECTION": "Entrada", "CHARGED": 15, "AFFORDED": 15 },
    { "NAME": "Name8", "DIRECTION": "Entrada", "CHARGED": 3,  "AFFORDED": 3 },
    { "NAME": "Name9", "DIRECTION": "Entrada", "CHARGED": 15, "AFFORDED": 15}
];

查看this fiddle

在您的情况下，由于您使用的是嵌入式数组，因此您只想拥有没有字段名称的数据，您应该有类似的内容：

var dataSet = [
    ["Name1", "Salida",  "15", "15"],
    ["Name2", "Salida",  "4",  "4"],
    ["Name3", "Entrada", "4",  "4"],
    ["Name4", "Salida",  "1",  "0"],
    ["Name5", "Entrada", "15", "15"],
    ["Name6", "Entrada", "10", "10"],
    ["Name7", "Entrada", "15", "15"],
    ["Name8", "Entrada", "3",  "3"],
    ["Name9", "Entrada", "15", "15"]
];

您可以将columns.data更改为column.title，以直接为每个数组项索引设置数据标题。检查this fiddle

因为您已在数据中包含字段名称。最好的办法是修改您的 JSON 输入源以返回直接可用的内容。如果你不能这样做，你可以修改你收到的数据，并通过删除嵌入的字段名称来重新组织它，然后用新修改的输入初始化数据表。

【讨论】：

【解决方案3】：

烦人的鼠标方法解决了我的问题。

我最后的电话是：

    var tableEntityList = $('#testable').DataTable({        
        "processing": true,
        "scrollY":"500px",
        "scrollCollapse": true,
        "paging":false,
        "serverSide":true,
        "ajax":{
            url:"./MyJson",
            dataSrc: function(json) {
                var properData = [];
                $.each(json.data, function(k, v) {
                    var returnObject = {};
                    $.each(v, function(a, b) {
                        var elArr = b.split(":");
                        returnObject[elArr[0].trim()] = elArr[1].trim()
                    });
                    properData.push(returnObject)
                });
                return properData;
            }
        },
        "columns": [
            { "data":'NAME' },
            { "data":'DIRECTION' },
            { "data":'CHARGED' },
            { "data":'AFFORDED' }   
        ]   
    });

【讨论】：