How to load Datatables from JSON object directly on Ajax success result?

Question

After long time searching here around I can't find a solution to this problem, loading Datatables via Ajax GET is well documented but how can I use directly a JSON response after an Ajax POST?

This is my PHP function:

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" }
                   ]
            });
        }
    });
}

The JSON on success looks like this:

{
    "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"
    },
    ...]
}

I also tried this:

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

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

But on console it always shows me the error "lenght of undefined" .

I already tried to load data directly from a JSON file url containing the same response here above and it works well.

How can I load JSON data on Ajax POST success results to populate my table?

Answer 1

Finally, after many tries, I found the solution that works with the latest Datatables release (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" }
                   ]
            });
        }
    });
}