title: JQuery datatable not filling from AJAX call despite successful response
body: <p>I have a dot net aspx page with a table set up as a JQuery DataTable (<a href="https://datatables.net/" rel="nofollow noreferrer">https://datatables.net/</a>) using an AJAX call to get the data from a Web Method.  The data is returned as a JSON object.</p>
  
  <p>The mechanics of each part seems to be working correctly.  The Web Method is called and returns a valid JSON object (according to JSONLint) and I can access and handle the returned data in the "success" callback function of the AJAX call.</p>
  
  <p>However, the datatable appears on the page without any body rows, just the header and footer.</p>
  
  <p><strong>HTML section from .aspx page</strong></p>
  
  <pre><code>&lt;div id="divIssueDetailsTable"&gt;
      &lt;table id="tblIssueDetails" class="table"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Team&lt;/th&gt;
                  &lt;th&gt;Score&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tfoot&gt;
              &lt;tr&gt;
                  &lt;th&gt;Team&lt;/th&gt;
                  &lt;th&gt;Score&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/tfoot&gt;
          &lt;tbody&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript function to create datatable</strong> (Including test code inside the success callback function to test the JSON object returned)</p>
  
  <pre><code>$('#tblIssueDetails').DataTable(
      {
          "processing": true,
          "serverSide": true,
          "cache": false,
          "destroy": true,
          "ajax":
              {
                  type: "POST",
                  url: "WebServices/WSGetData.asmx/ReturnIssues",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  data: "",
                  success: function (results) {
                      toastr["success"]("AJAX call succeeded.", "Success:");
                      var objJSON = $.parseJSON(results.d);
                      $(objJSON.data).each(function () {
                          alert(this.Age);
                      });
                  },
                  error: function(e) {
                      toastr["error"]("There has been a problem retrieving the information from the database. " + e.responseText, "Error:");
                  },
                  complete: function () {
                      $('#divIssueDetailsTable').show();
                  }
              }
      });
  </code></pre>
  
  <p><strong>What the web method is returning</strong> (test data)</p>
  
  <blockquote>
    <p>d: "{ "data":
    [{"Name":"Freddy","Age":"23"},{"Name":"Jane","Age":"23"},{"Name":"Rod","Age":"23"}]
    }"</p>
  </blockquote>
  
  <p>The weird thing is, all of the separate parts seem to be working correctly, but it just not refreshing the table.</p>
  
  <p>I can't find any links on datatables just refusing to display data.  I have tried the following:</p>
  
  <p><a href="https://datatables.net/examples/basic_init/zero_configuration.html" rel="nofollow noreferrer">https://datatables.net/examples/basic_init/zero_configuration.html</a>
  <a href="https://datatables.net/examples/data_sources/ajax.html" rel="nofollow noreferrer">https://datatables.net/examples/data_sources/ajax.html</a>
  <a href="https://stackoverflow.com/questions/25638987/fill-datatable-with-json-and-web-service">fill datatable with json and web service</a>
  <a href="https://stackoverflow.com/questions/18191697/datatables-not-refreshing-after-second-network-request">Datatables not refreshing after second network request</a>
  <a href="https://stackoverflow.com/questions/39478730/datatables-datasrc-function-not-called-on-successful-ajax-response">datatables dataSrc function not called on successful ajax response</a></p>
  
  <p>Any help much appreciated.</p>