从 table 中的 JSON 数组获取数据

Question

如果网站给出 json 数组数据如下

mycallback([{"id":"2","name":"Kelly","age":"12"},{"id":"3","name":"Robby","age":"12"}])

我如何将这个 json 数组数据称为 table

我试过了，但没有成功！

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('#example').dataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "http://WebSite_URL.com/data.php",
            "dataType": "jsonp",
            "jsonp":"mycallback"

        }
    } );
} );
</script>

<table id="example" cellspacing="0" width="100%">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</table>

Answer 1

这是一个 JSONP 调用，您提供了一个函数名称（此处为 "mycallback"）。因此，服务器将发送数据，以便它使用 [=28 调用您提供的函数=] data.Here,mycallback([{"id":"2","name":"Kelly","age":"12{"id":" 3","name":"Robby","age":"12"}]).

您需要做的是定义一个名为 "mycallback" 的函数，它将有一个参数，您可以在那里做任何您想做的事情。

示例：

  function mycallback(data){
                var table = document.getElementById('example');
                var tableHtml = '' // make the html here with this data (using a template engine)
                table.innerHTML = tableHtml;
          }

Answer 2

默认情况下，DataTables 希望数据源包含在名为 data 的变量中，如下所示：

{data:[{"id":"2","name":"Kelly","age":"12"},{"id":"3","name":"Robby","age":"12"}]}

但是，在您的情况下，我假设更改 json 格式不是一个选项，因为它是一个 Jsonp 请求。因此，我假设您的数据被格式化为 "flat" 数组并且不能像这样更改：

[{"id":"2","name":"Kelly","age":"12"},{"id":"3","name":"Robby","age":"12"}]

现在，通过将 ajax 数组中的 dataSrc 选项作为空白值，dataTables 允许使用 "flat" 数组结构。此外，由于您的数据源对每个值都有一个键，因此您必须使用 columns 选项指定它。因此，您的数据表代码将变为：

$('#example').dataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": "http://WebSite_URL.com/data.php",
        "dataType": "jsonp",
        "jsonp":"mycallback",
        "dataSrc": ""
    },
    "columns": [
        {"data": "id"},
        {"data": "name"},
        {"data": "age"},
    ]
} );

这当然是假设您的 ajax 调用和 jsonp 回调都已正确完成。

从 table 中的 JSON 数组获取数据

Getting data from JSON array in a table

javascript

jquery

json

jsonp