logo标签列表

如何将JSON数据插入到DataTable中

jqueryhtmljson
3

我刚开始学习 Javascript，现在我想要在按钮点击时将 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 函数的 ('#deviceTable') 处出现了一个 UncaughtType 错误。但我很确定这不是将数据加载到 DataTable 的正确方法。

 
//设置连接的信号服务器 URL
            var url = 'http://localhost:8080/signalr';
var connection = $.hubConnection(url);
// 声明一个代理引用信号服务器。
            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
                });
        }
抱歉排版不当，我在编辑时看不到任何空格，但不确定提交后它们是如何添加的... - marak
5个回答
1
Jifho，感谢您的回复。我按照您建议的格式化了我的JSON数据，但是在$('#deviceTable').dataTable这一行出现了“未捕获的类型错误：Undefined is not a function”错误。我在HTML body中定义了一个表格，如下： 
$(document).ready(function () {
var url = 'http://localhost:8080/signalr';
var connection = $.hubConnection(url);
// 声明一个代理以引用该中心。
    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"}]}
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

Jifho，感谢您的回复。我按照您的建议格式化了我的JSON数据，但是在$('#deviceTable').dataTable行出现了“未捕获的TypeError：Undefined不是函数”的错误。我在HTML正文中定义了一个表格，如下：<table id="deviceTable"> </table> - marak
1
马拉克，数据通过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>
Jifho，我在我的结果对象中获取到了数据。但是我无法将它插入到表格中。当访问数据表格（$('#deviceTable').dataTable）时，我遇到了一个“未捕获的类型错误：未定义的函数”错误。 - marak
尝试首先使用预定义数据创建表格，而不使用函数processDeviceDataResults()。 - Jifho
Jifho，我通过在dataTable引用上方添加Jquery 1.11.1引用来解决了它。 - marak
0

Venkata，甚至都没有达到您提到的更改，它在“$('#deviceTable').dataTable”一行上出现了“未捕获的TypeError：Undefined is not a function”错误。

0

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

src="text/javascript" src="Scripts/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="Scripts/jquery.signalR-2.1.2.js"

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接