如何將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

回答

相關問題