dataTables 1.10.1 - 未显示json数据

时间:2014-07-24 01:49:01

标签: jquery ajax json datatables

让我们保持简短。 我有简单的dataTables( 1.10.1 )实现,但代码下面没有任何显示。甚至不是一个单一的错误。

出于测试目的,数据从本地服务器加载。它是一个有效的json,它在浏览器中打开。使用例如firefox中的firebug我可以在后台看到数据加载,但我想json中的数据字段没有被正确访问,这可能是问题的根源。

Json由服务器正确处理。在下面的示例中,它是一个平面文件,但我正在寻找一种解决方案来处理来自服务器的平面文件或动态输出,例如来自webapi的输出。

我已阅读http://datatables.net/examples/ajax/deep.html和许多其他来源,例如DataTables 1.10 - Not Showing Results,但我没有找到任何线索。

你能看一下这个帮我吗? ..如果解决方案很明显,我真的很抱歉打扰:( 谢谢你的理解。

页眉中的脚本+ css:

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>

JSON数据(来自http://server/input_data.json的输出):

{
    "servicestatuslist": {
        "servicestatus": [
            {
                "service_id": "Tiger Nixon",
                "host_name": "System Architect",
                "host_address": "$320,800",
                "display_name": "2011/04/25",
                "status_text": "Edinburgh",
                "last_check" : "5421"
            },
            {
                "service_id": "Garrett Winters",
                "host_name": "Accountant",
                "host_address": "$170,750",
                "display_name": "2011/07/25",
                "status_text": "Tokyo",
                "last_check" : "8422"
            }
        ]
    }
}

页面上的JavaScript:

<script type="text/javascript">
    $(document).ready(function() {
        $('#example').dataTable({
            processing: true,
            ajax: 'http://server/input_data.json',
            columns: [
                { data: 'servicestatus.service_id' },
                { data: 'servicestatus.host_name' },
                { data: 'servicestatus.host_address' },
                { data: 'servicestatus.display_name' },
                { data: 'servicestatus.status_text' },
                { data: 'servicestatus.last_check' }
            ]
        });
    });
</script>

HTML:

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>id</th>
            <th>hostname</th>
            <th>address</th>
            <th>service</th>
            <th>message</th>
            <th>time</th>
        </tr>
    </thead>
</table>

1 个答案:

答案 0 :(得分:2)

好的,我自己找到了答案。它确实很简单但是虽然json输入是嵌套的,但解决方案的起点是“Flat array data source”。

有(http://datatables.net/examples/ajax/custom_data_flat.html)是关于数据默认参数名称的标题,可以使用dataSrc轻松更改(事实证明)。我的问题的解决方案是设置ajax如下:

ajax: { 
url: 'http://server/input_data.json',
dataSrc: 'servicestatuslist.servicestatus'
}

并调用列数据,如

{ data: 'service_id' }