Question

我是Javascript的新手，我试图通过点击按钮动态地将Json数据加载到数据表中。

我的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错误（＆＃39;＃deviceTable＆＃39;）。但是，我很确定这不是您将数据加载到数据表中的方式。

   

                      
            //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
                });
        }

Answer 1

试试这个

data.json

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

JS

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

示例http://www.wishesafterlive.com/stackoverflow/dataTableJson.php

Answer 2

Jifho，谢谢你的回复。我按照你的建议格式化了我的JSON数据，我得到一个“Uncaught TypeError：Undefined不是$（'＃deviceTable'）上的函数.dataTable line。我在我的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"}]}

Answer 3

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>

Answer 4

Venkata，它甚至没有提到你提到的变化，它得到一个＆＃34; Uncaught TypeError：Undefined不是$（＆＃39;＃deviceTable＆＃39;）的函数.dataTable line

Answer 5

是Venkata，他们在Head标签中被引用。这是它们被引用的顺序

SRC =＆＃34;文本/ JavaScript的＆＃34; SRC =＆＃34;脚本/ jQuery的1.6.4.js＆＃34;

SRC =＆＃34; // cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"

HREF =＆＃34; HTTPS：//cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"

HREF =＆＃34; HTTPS：//cdn.datatables.net/autofill/1.2.1/css/dataTables.autoFill.css"

SRC =＆＃34; HTTPS：//code.jquery.com/jquery-1.11.1.js"

SRC =＆＃34;脚本/ jquery.signalR-2.1.2.js＆＃34;

如何将JSON数据插入DataTable

5 个答案: