如何直接在Ajax成功结果上从JSON对象加载数据表？

Question

经过长时间的搜索，我找不到解决这个问题的方法，通过Ajax GET加载Datatables的文档已被很好地证明，但是如何在Ajax POST之后直接使用JSON响应呢？

这是我的PHP函数：

function getRelated() {
    var elements = (document.getElementsByClassName('exashare'));
    var query = [];
    for(var i=0;typeof(elements[i])!='undefined';query.push(elements[i++].getAttribute('data-id')));

    query = query.join(',');

    $.ajax({
        type: "POST",
        url: baseUrl+"/requests/get_related.php",
        data: "query="+query+'&_token='+_token, 
        cache: false,

        success: function(html){
            $('#example').DataTable( {
                "processing": true,
                "serverSide": true,
                "ajax": {
                    'url':jQuery.parseJSON(html),
                    "dataSrc": ""
                },
                "columns" : [
                        { "data": "#" },
                        { "data": "id" },
                        { "data": "art" },
                        { "data": "name" },
                        { "data": "title" },
                        { "data": "tag" },
                        { "data": "likes" },
                        { "data": "views" },
                        { "data": "duration" },
                        { "data": "time" }
                   ]
            });
        }
    });
}

成功的JSON如下所示：

{
    "data": [{
        "#": "1",
        "id": "9",
        "art": "default\/def8.jpg",
        "name": "Simon The Cat",
        "title": "Riflessioni sulla vita",
        "tag": "riflessioni,vita,",
        "likes": "1",
        "views": "1024",
        "duration": "185",
        "time": "2015-11-30 19:36:31"
    }, {
        "#": "2",
        "id": "15",
        "art": "default\/def2.jpg",
        "name": "Simon The Cat",
        "title": "Riflessioni sulla morte",
        "tag": "riflessioni,morte,",
        "likes": "1",
        "views": "1003",
        "duration": "185",
        "time": "2015-11-14 12:06:21"
    },
    ...]
}

我也试过这个：

//from this:
$('#example').DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": {
        'url':jQuery.parseJSON(html),
        "dataSrc": ""
    },
    ...

//to this:
$('#example').DataTable( {
    "ajax": jQuery.parseJSON(html),
    ...

但是在控制台上，它总是向我显示错误"lenght of undefined"。

我已经尝试直接从包含以上相同响应的JSON文件URL加载数据，并且效果很好。

如何在Ajax POST成功结果上加载JSON数据以填充表？

Answer 1

最后，经过多次尝试，我找到了适用于最新Datatables版本（1.10.13）的解决方案：

function getRelated() {
    var elements = (document.getElementsByClassName('exashare'));
    var query = [];
    for(var i=0;typeof(elements[i])!='undefined';query.push(elements[i++].getAttribute('data-id')));

    //parse as string
    query = query.join(',');

    $.ajax({
        type: "POST",
        url: baseUrl+"/requests/get_related.php",
        data: "query="+query+'&_token='+_token, 
        cache: false,

        success: function(html){
            //html is a json_encode array so we need to parse it before using
            var result = jQuery.parseJSON(html);
            $('#example_ert').DataTable( {
                //here is the solution
                "data": result.data,
                "ajax": {
                          "url": result,
                          "dataSrc": ""
                        },
                "columns" : [
                        { "data": "#" },
                        { "data": "id" },
                        { "data": "art" },
                        { "data": "name" },
                        { "data": "title" },
                        { "data": "tag" },
                        { "data": "likes" },
                        { "data": "views" },
                        { "data": "duration" },
                        { "data": "time" }
                   ]
            });
        }
    });
}