title: ajax.dataSrc for datatables not working
body: <p>I am trying to use dataSrc property or manipulation method for table data. 
  To see how I can manipulate data, I am trying this simple code.</p>
  
  <p>test.php</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;  
   &lt;html&gt;  
        &lt;head&gt;  
             &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /&gt;  
             &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;  
             &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;  
             &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/&gt;  
             &lt;script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"&gt;&lt;/script&gt;  
  
        &lt;/head&gt;  
        &lt;body&gt;  
             &lt;br /&gt;&lt;br /&gt;  
             &lt;div class="container"&gt;  
                  &lt;table id="data-table" class="table table-bordered"&gt;  
                       &lt;thead&gt;  
                            &lt;tr&gt;  
                                 &lt;th&gt;Mobile&lt;/th&gt;  
                                 &lt;th&gt;Name&lt;/th&gt;  
                                 &lt;th&gt;Email&lt;/th&gt;
                                 &lt;th&gt;Credits&lt;/th&gt;
                            &lt;/tr&gt;  
                       &lt;/thead&gt;  
                  &lt;/table&gt;  
             &lt;/div&gt;  
        &lt;/body&gt;  
   &lt;/html&gt;  
    &lt;script&gt;  
  
   $(document).ready(function(){  
  
        $('#data-table').DataTable({  
  
             "ajax"     :     {
               "dataSrc": function ( json ) {
                  var array = {};
                    for ( var i=0, ien=json.length ; i&lt;ien ; i++ ) {
                      array[i] = json[i];//'&lt;a href="/message/'+json[i][0]+'&gt;View message&lt;/a&gt;';
                    }
                    console.log(json);
                    console.log(JSON.stringify(json));
                  return (JSON.stringify(json));
                }
              },  
  
             "columns"     :     [  
  
                  {     "data"     :     "Mobile",
                   "defaultContent": "&lt;i&gt;Not set&lt;/i&gt;"},  
  
                  {     "data"     :     "Name",
                   "defaultContent": "&lt;i&gt;Not set&lt;/i&gt;"},  
  
                  {     "data"     :     "Email",
                   "defaultContent": "&lt;i&gt;Not set&lt;/i&gt;"},
  
                  {     "data"     :     "Credits", 
                   "defaultContent": "&lt;i&gt;Not set&lt;/i&gt;"},
  
             ]  
        });  
   }); 
   &lt;/script&gt;  
  </code></pre>
  
  <p>When I run, localhost/test.php</p>
  
  <pre><code>Mobile  Name    Email   Credits 
  Not set Not set Not set Not set 
  Not set Not set Not set Not set 
  Not set Not set Not set Not set
  </code></pre>
  
  <p>Though, data.json has:</p>
  
  <pre><code>{
      "data": [{
          "Mobile": "1234567890",
          "Name": "test",
          "Email": "test@gmail.com",
          "Credits": "50",
      }, {
          "Mobile": "8200469963",
          "Name": "amit",
          "Email": "adsf@gmail.com",
          "Credits": "0",
      }, {
          "Mobile": "8989899889",
          "Name": "sdfsd",
          "Email": "sdfsd",
          "Credits": "100",
      }, {
          "Mobile": "9889812580",
          "Name": "box",
          "Email": "asdfadfs@gmail.com",
          "Credits": "98",
  
      }, {
          "Mobile": "9999999999",
          "Name": "user9",
          "Email": "user9@gmail.com",
          "Credits": "0",
      }]
  }
  </code></pre>
  
  <p>Also, If I remove dataSrc part totally. I get Proper results. What am I doing wrong in dataSrc?</p>