dataTables 1.10.1 - 不显示json数据 [英] dataTables 1.10.1 - no json data displayed

问题描述

让我们保持简短。
我有简单的dataTable（ 1.10.1 ）实现，但下面的代码没有显示。甚至没有sigle错误。

为了测试目的，从本地服务器加载数据。这是一个有效的json，它在浏览器中打开。使用例如Firefox中的Firebug我可以在后台看到数据加载，但我猜来自json的数据字段没有正确访问，这可能是问题的根源。

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

我已阅读 http ：//datatables.net/examples/ajax/deep.html 和许多其他来源，如 DataTables 1.10 - 不显示结果，但是我没有找到任何线索。

你可以看看帮助我吗？ ..我非常抱歉如果解决方案很明显:(
感谢您的理解。

脚本+ CSS页面标题：

 < link rel =stylesheettype =text / csshref =// cdn。 datatables.net/1.10.1/css/jquery.dataTables.css\"> 
< script type =text / javascriptlanguage =javascriptsrc =// code.jquery.com/jquery- 1.11.1.min.js>< / script> 
< script type =text / javascriptlanguage =javascriptsrc =// cdn.datatables.net/1.10.1/js /jquery.dataTables.min.js\"></script> 
  

JSON数据（从 http：//server/input_data.json 输出）：

 code> {
servicestatuslist：{
servicestatus：[
 {
service_id：Tiger Nixon，
host_name 系统架构师，
host_address：$ 320,800，
display_name：2011/04/25 
status_text：爱丁堡，
last_check：5421
}，
 {
service_id：Garrett Winters，
host_name：会计师，
host_address：$ 170,750，
display_name：2011/07/25，
status_text：东京 b $ blast_check：8422
} 
] 
} 
} 
  

页面上的JavaScript：

 < script type = text / javascript> 
 $（document）.ready（function（）{
 $（'＃example'）。dataTable（{
 processing：true，
 ajax：'http：// server /input_data.json'，
列：[
 {data：'servicestatus.service_id'}，
 {data：'servicestatus.host_name'}，
 {data：'servicestatus 
 {data：'servicestatus.display_name'} 
 {data：'servicestatus.status_text'}，
 {data：'servicestatus.last_check'} 
 ] 
}）; 
}）; 
< / script> 
  

HTML：

 < table id =exampleclass =displaycellspacing =0width =100％> 
< thead> 
< tr> 
< th> id< / th> 
< th>主机名< / th> 
< th>地址< / th> 
< th>服务< / th> 
< th>消息< / th> 
< th> time< / th> 
< / tr> 
< / thead> 
< / table> 
  

解决方案

好的，我自己找到了答案。确实很简单，但是尽管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'} 
  pre> 
Let's keep it short.
I have simple dataTables (1.10.1) implementation to make but with code below nothing shows up. Not even a sigle error.

For testing purposes data is loaded from the local server. It's a valid json and and it opens in a browser. Using e.g. Firebug in firefox I can see data loading in a background but I guess data fields from json are not properly accessed and that may be the source of the problem.

Json is handled by the server properly. In the example below it is a flat file but I'm looking for a solution to handle either a flat file or dynamic output from server e.g. output from webapi.

I have read http://datatables.net/examples/ajax/deep.html and many other sources like DataTables 1.10 - Not Showing Results but I didn't find any clues.

Can you please take a look and help me with this one? ..and I'm really sorry for bothering if the solution is obvious :(
Thanks for understanding.

Scripts + css in page header:
<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 data (output from 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 on the page:
<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>

解决方案
Ok, I found the answer myself. It is indeed very simple but although the json input is nested, the starting point for the solution was the "Flat array data source".

There (http://datatables.net/examples/ajax/custom_data_flat.html) is a caption about data default parameter name, which (as it turns out) can easily be changed using dataSrc. The solution to my problem was setting ajax as follows:
ajax: { 
url: 'http://server/input_data.json',
dataSrc: 'servicestatuslist.servicestatus'
}
and call column data like
{ data: 'service_id' }


                        
这篇关于dataTables 1.10.1  - 不显示json数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！