title: Ajax Datatable ERROR : No data available in table
body: <p>I tried 2 types of Ajax, one is the append data into datatable way, one is using columns and display array data.</p>
  <p>The append data one can work but the result isn't ideal because the datatable is not align well and assoc is not working.</p>
  <p><a href="https://i.stack.imgur.com/Xn6DW.png" rel="nofollow noreferrer">Ajax append data result</a></p>
  <p>So I want to use the &quot;typical&quot; way to display my datatable, but I use the exactly same value and variable which is same with my append data Ajax but I dont know why this Ajax still cant work as the datatable always show &quot;No data available in table&quot; even I can fetch the data. What is the problem?</p>
  <p><strong>Ajax of append data:</strong>(can work)</p>
  <pre><code>$(document ).ready(function(){
      $.ajax({
          type: 'GET',
          url: 'table_backend2.php',
          mimeType: 'json',
          &quot;processing&quot;: true,
          success: function(data2) {
              var aaData=data2['aaData'];
              $.each(aaData, function(i, data) {
                  var body = &quot;&lt;tr&gt;&quot;;
                  body    += &quot;&lt;td&gt;&quot; + data.id+ &quot;&lt;/td&gt;&quot;;
                  body    += &quot;&lt;td&gt;&quot; + data.show_activity_id + &quot;&lt;/td&gt;&quot;;
                  body    += &quot;&lt;td&gt;&quot; + data.nasa_id + &quot;&lt;/td&gt;&quot;;
                  body    += &quot;&lt;td&gt;&quot; + data.game_show_id + &quot;&lt;/td&gt;&quot;;
                  body    += &quot;&lt;td&gt;&quot; + data.account_id + &quot;&lt;/td&gt;&quot;;
                  body    += &quot;&lt;/tr&gt;&quot;;
                  $( &quot;#showTable&quot; ).append(body);
              });
              $( &quot;#showTable&quot; ).DataTable();
          },
          error: function() {
              alert('Fail!');
          }
      });
  });
  
  </code></pre>
  <p><strong>Typical datatable Ajax</strong> (Always show no data available0</p>
  <pre><code>$(document).ready(function(){
      $.ajax({
          'type': 'GET',
          'url':'table_backend2.php'
      }).done(function(data) {
          var aaData=data['aaData'];
          $(&quot;#showTable&quot;).DataTable({
              &quot;aaData&quot;:aaData,
              &quot;columns&quot;: [
                  { aaData: &quot;id&quot;},
                  { aaData: &quot;show_activity_id&quot; },
                  { aaData: &quot;nasa_id&quot; },
                  { aaData: &quot;game_show_id&quot; },
                  { aaData: &quot;account_id&quot;},
              ]
          });
      });
  });
  </code></pre>
  <p><strong>php file</strong>
  (I just put the fetch records part as I worry the code will be too big)</p>
  <pre><code>     ## Fetch records
        $empQuery = &quot;SELECT * from analysis_data.show_incentive&quot;;
        $empRecords = mysqli_query($connData['conn'], $empQuery);
        $data = array();
        while ($row = mysqli_fetch_assoc($empRecords)) {
           $data[] = array( 
              &quot;id&quot;=&gt;$row['id'],
              &quot;show_activity_id&quot;=&gt;$row['show_activity_id'],
              &quot;nasa_id&quot;=&gt;$row['nasa_id'],
              &quot;game_show_id&quot;=&gt;$row['game_show_id'],
              &quot;account_id&quot;=&gt;$row['account_id']
           );
        }
  
        ## Response
        $response = array(
           &quot;draw&quot; =&gt; intval($draw),
           &quot;iTotalRecords&quot; =&gt; $totalRecords,
           &quot;iTotalDisplayRecords&quot; =&gt; $totalRecordwithFilter,
           &quot;aaData&quot; =&gt; $data
        );
  
        echo json_encode($response);
     }
  </code></pre>