javascript - 从表中的 JSON 数组获取数据

Question

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

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

我如何将此json数组数据调用到表中

我尝试过，但没有成功!

<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

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

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

但是，就您而言，我假设更改 json 格式不是一个选项，因为它是 Jsonp 请求。因此，我假设您的数据被格式化为“平面”数组，并且不能像这样进行更改:

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

现在，dataTables 允许通过将 ajax 数组中的 dataSrc 选项指定为空白值来使用“平面”数组结构。此外，由于您的数据源的每个值都有一个键，因此您必须使用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 回调都正确完成。