Question

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

之后，浏览器会显示：

我在几小时内试图警告信息中的网址说明了......但我没弄明白。

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>

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

谢谢。

Answer 1

如果您使用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输入源以返回可直接使用的内容。如果您不能这样做，您可以修改收到的数据并通过删除嵌入的字段名称重新组织它，然后使用新修改的输入初始化数据表。

Answer 2

在将数据传递给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无效！

Answer 3

annoyingmouse方法解决了我的问题。

我最后的电话是：

    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' }   
        ]   
    });

将Json对象加载到datatable（ajax）

3 个答案: