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

这是一个JSONP调用，你提供了一个函数名称（这里＆＃34; mycallback＆＃34;）。因此，服务器将发送数据，以便它使用JSON数据调用你提供的函数。这里，mycallback（ [{＆＃34; ID＆＃34;：＆＃34; 2＆＃34;＆＃34;名称＆＃34;：＆＃34;凯利＆＃34;＆＃34;年龄＆＃34;：＆＃34 ; 12 {＆＃34; ID＆＃34;：＆＃34; 3＆＃34;＆＃34;名称＆＃34;：＆＃34;罗比＆＃34;＆＃34;年龄＆＃34;：＆＃ 34; 12＆＃34;}]）

你需要做的是定义一个名为＆＃34; mycallback＆＃34;的函数。这将有一个参数，你可以做任何你想做的事。

示例：

  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请求。所以，我假设您的数据被格式化为＆＃34; flat＆＃34;数组，不能像这样改变：

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

现在，dataTables允许＆＃34;平坦＆＃34;通过将dataSrc数组中的ajax选项作为空值来使用的数组结构。此外，由于您的数据源具有每个值的键，因此您必须使用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回调都已正确完成。

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

2 个答案: