如何将JSON数据插入DataTable

我是Javascript新手，我试图通过单击按钮将Json数据动态加载到数据表中。如何将JSON数据插入DataTable

的json数据是在下面的格式

 
    [{"DeviceName":"AND1","IPAddress":"10.10.12.1221"}, {"DeviceName":"AND2","IPAddress":"10.10.12.1222"},{"DeviceName":"AND3","IPAddress":"10.10.12.1223"}]

这里是我完整的HTML代码：当我运行此代码，我得到的processDeviceDataResults的UncaughtType错误的（“#deviceTable”）。但是，我很确定这不是您将数据加载到数据表的方式。

 

         
      //Set the hubs URL for the connection 
      var url = 'http://localhost:8080/signalr'; 

      var connection = $.hubConnection(url); 

      // Declare a proxy to reference the hub. 
      var hubProxy = connection.createHubProxy('HubClass'); 

      hubProxy.on('DeviceDataResults', processDeviceDataResults); 

      connection.start().done(function() { 
       $("#GetDeviceData").click(function() { 
        hubProxy.invoke('GetDeviceData'); 
       }); 
      }); 

      function processDeviceDataResults(results) {     
       $('#deviceTable').dataTable({ 
        "aodata": results 
       }); 
     }

来源

2014-10-05 marak

原谅我不正确的间距，我没有看到任何编辑它的空间，但不知道他们如何得到添加后提交.... – marak 2014-10-05 19:42:57

试试这个

data.json

{ 
    "data": [ 
     { 
      "DeviceName": "AND1", 
      "IPAddress": "10.10.12.1221" 
     }, 
     { 
      "DeviceName": "AND2", 
      "IPAddress": "10.10.12.1222" 
     }, 
     { 
      "DeviceName": "AND3", 
      "IPAddress": "10.10.12.1223" 
     } 
    ] 
}

$('#deviceTable').dataTable({ 
     "ajax": "data.json", 
     "columns": [ 
     { "data": "DeviceName" }, 
     { "data": "IPAddress" } 
    ] 
    });

例如这里http://www.wishesafterlive.com/stackoverflow/dataTableJson.php

来源

2014-10-05 20:12:04 Jifho

Jifho，谢谢你的回应。我格式化我的JSON数据如你所说，我得到一个“遗漏的类型错误：不确定是不是在$函数（‘＃deviceTable’）的dataTable行我已经在我的HTML主体限定的表作为<表ID =。” deviceTable “> – marak 2014-10-05 21:12:48

Jifho，感谢您的答复。我格式化我的JSON数据如你所说，我得到一个“遗漏的类型错误：不确定是不是在$函数（‘＃deviceTable’）的dataTable行我已经在我的HTML主体限定的表作为

 

     $(document).ready(function() { 

      var url = 'http://localhost:8080/signalr'; 

      var connection = $.hubConnection(url); 

      // Declare a proxy to reference the hub. 
      var hubProxy = connection.createHubProxy('HubClass'); 

      hubProxy.on('DeviceDataResults', processDeviceDataResults); 

      connection.start().done(function() { 
       $("#GetDeviceData").click(function() { 


        hubProxy.invoke('GetDeviceData'); 
       }); 


      }); 

      function processDeviceDataResults(results) { 

       $('#deviceTable').dataTable({ 
        "ajax": results, 
        "columns": [ 
         { "data": "DeviceName" }, 
         { "data": "IPAddress" } 
        ] 
       }); 
      } 
     });

。

我的JSON结果：

 
    {"data":[{"DeviceName":"AND1","IPAddress":"10.10.12.1221"},{"DeviceName":"AND2","IPAddress":"10.10.12.1222"},{"DeviceName":"AND3","IPAddress":"10.10.12.1223"}]}

来源

2014-10-05 21:25:00 marak

文卡塔，它甚至没有得到，直到你提到的变化，它得到一个“遗漏的类型错误：未定义不上$函数（‘＃deviceTable’）的dataTable线

来源

2014-10-05 23:55:51 marak

是Venkata它们在Head标签中被引用。这是在其中它们被引用

SRC = “文本/ JavaScript的” SRC = “脚本/ jQuery的1.6.4.js”

SRC =“// cdn.datatables.net/1.10的顺序。 2/JS/jquery.dataTables.min.js “

HREF = ”https://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css“

HREF =” https://cdn.datatables.net/autofill/1.2.1/css/dataTables.autoFill.css“

src =”https://code.jquery.com/jquery-1.11.1.js“

SRC = “脚本/ jquery.signalR-2.1.2.js”

来源

2014-10-06 00:51:37 marak

marak的数据被通过AJAX加载在其他文件

ajax.php

<?php 

//in ajax.php get json data 
//Here you can create a function that returns the data 
$response=' 
{ 
    "data": [ 
     { 
      "DeviceName": "AND1", 
      "IPAddress": "10.10.12.1221" 
     }, 
     { 
      "DeviceName": "AND2", 
      "IPAddress": "10.10.12.1222" 
     }, 
     { 
      "DeviceName": "AND3", 
      "IPAddress": "10.10.12.1223" 
     } 
    ] 
}'; 

echo $response; 
?>

dataTableJson.php

<!DOCTYPE > 
    <html> 
    <head> 
    <title>Data Table Json</title> 

     <link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" /> 
     <link rel="stylesheet" href="http://cdn.datatables.net/autofill/1.2.1/css/dataTables.autoFill.css" /> 


     <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script> 
     <script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script> 

    <script> 

    $(document).ready(function() { 

     $('#deviceTable').dataTable({ 
      "ajax": "ajax.php", 
      "columns": [ 
      { "data": "DeviceName" }, 
      { "data": "IPAddress" } 
     ] 
     }); 
    }); 
    </script> 

</head> 
<body> 
    <table id="deviceTable" class="hover" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Device</th> 
       <th>IP</th> 
      </tr> 
     </thead> 

     <tfoot> 
      <tr> 
       <th>Device</th> 
       <th>IP</th> 
      </tr> 
     <tfoot> 
    </table> 
</body> 
</html>

来源

2014-10-06 00:59:17 Jifho

Jifho，我在我的结果得到的数据对象。但我不能将它插入到表中。当访问数据表（$（‘＃deviceTable’）。dataTable的），我得到一个未捕获类型错误：未定义不是函数错误 – marak 2014-10-06 01:08:15

尝试首先创建与预定义的数据表中，在不使用函数processDeviceDataResults（） – Jifho 2014-10-06 14:17:45

Jifho，我通过添加Jquery的1.11.1参考上述数据表示参考解决它 – marak 2014-10-06 22:00:01

如何将JSON数据插入DataTable

回答

相关问题