title: How to load Datatables from JSON object directly on Ajax success result?
body: <p>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? </p>
  
  <p>This is my <strong>PHP</strong> function:</p>
  
  <pre><code>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+'&amp;_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" }
                     ]
              });
          }
      });
  }
  </code></pre>
  
  <p>The <strong>JSON</strong> on success looks like this:</p>
  
  <pre><code>{
      "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"
      },
      ...]
  }
  </code></pre>
  
  <p>I also tried this:</p>
  
  <pre><code>//from this:
  $('#example').DataTable( {
      "processing": true,
      "serverSide": true,
      "ajax": {
          'url':jQuery.parseJSON(html),
          "dataSrc": ""
      },
      ...
  
  //to this:
  $('#example').DataTable( {
      "ajax": jQuery.parseJSON(html),
      ...
  </code></pre>
  
  <p>But on console it always shows me the error <code>"lenght of undefined"</code>.</p>
  
  <blockquote>
    <p>I already tried to load data directly from a JSON file url
    containing the same response here above and it works well.</p>
  </blockquote>
  
  <p><strong>How can I load JSON data on Ajax POST success results to populate my table?</strong></p>