title: Jquery DataTables: Data not displaying in table via Ajax
body: <p>My problem is that Jquery DataTables is hanging at Loading and will not display any data from the php script:</p>
  <p><a href="https://i.stack.imgur.com/WY0Ru.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WY0Ru.png" alt="enter image description here" /></a></p>
  <p>Here is my HTML:</p>
  <pre><code> &lt;!-- Default box --&gt;
    &lt;div class=&quot;box&quot;&gt;
      &lt;div class=&quot;box-header with-border&quot;&gt;
        &lt;h3 class=&quot;box-title&quot;&gt;Time Management&lt;/h3&gt;
  
        &lt;div class=&quot;box-tools pull-right&quot;&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn btn-box-tool&quot; data-widget=&quot;collapse&quot; data-toggle=&quot;tooltip&quot; title=&quot;Collapse&quot;&gt;
            &lt;i class=&quot;fa fa-minus&quot;&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn btn-box-tool&quot; data-widget=&quot;remove&quot; data-toggle=&quot;tooltip&quot; title=&quot;Remove&quot;&gt;
            &lt;i class=&quot;fa fa-times&quot;&gt;&lt;/i&gt;&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;box-body&quot;&gt;
         &lt;table id=&quot;example&quot; class=&quot;table table-bordered table-hover&quot;&gt;
             &lt;thead&gt;
                 &lt;tr&gt;
                 &lt;th&gt;ID&lt;/th&gt;
                 &lt;th&gt;Clock In&lt;/th&gt;
                 &lt;th&gt;Lunch Started&lt;/th&gt;
                 &lt;th&gt;Lunch Ended&lt;/th&gt;
                 &lt;th&gt;Clock Out&lt;/th&gt;
                 &lt;/tr&gt;
             &lt;/thead&gt;
         &lt;/table&gt;
      &lt;/div&gt;
      &lt;!-- /.box-body --&gt;
      &lt;div class=&quot;box-footer&quot;&gt;
        Footer
      &lt;/div&gt;
      &lt;!-- /.box-footer--&gt;
    &lt;/div&gt;
    &lt;!-- /.box --&gt;
  </code></pre>
  <p>My Jquery Code:</p>
  <pre><code>&lt;script&gt;
      $(document).ready(function() {
      $('#example').DataTable({
         &quot;ajax&quot;: &quot;api/timemanageprocess.php&quot;, 
         &quot;dataSrc&quot;: '',
         &quot;type&quot;: &quot;POST&quot;,
      
      &quot;columns&quot;: [
          {&quot;data&quot;: &quot;PASS_ID&quot;},
          {&quot;data&quot;: &quot;CLOCK_IN&quot;},
          {&quot;data&quot;: &quot;START_LUNCH&quot;},
          {&quot;data&quot;: &quot;END_LUNCH&quot;},
          {&quot;data&quot;: &quot;CLOCK_OUT&quot;}
          ],
        });
      });
  &lt;/script&gt;
  </code></pre>
  <p>And my results from my PHP script.  I echoed the results from json_encode():
  <a href="https://i.stack.imgur.com/cKrrT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cKrrT.png" alt="enter image description here" /></a></p>
  <p>I've tried to use <code>&quot;data&quot;: data &amp; &quot;data&quot;: json</code> as options in DataTable().  I've tried to put curly brackets to define ajax's options.  I've tried excluding <code>dataSrc=''</code> altogether, I've tried removing <code>type: 'POST'</code> and leaving it to <code>GET</code>.  I know my php script address is correct.   I don't know what it is or they are that is blocking the data from populating in Data Tables.   Could someone help me figure it out?  Thanks in advance. Help would be much appreciated.</p>
  <h2>PHP</h2>
  <pre><code>
  include ('../includes/sessions.php');
  
  $select = &quot;SELECT PASS_ID, CLOCK_IN, START_LUNCH, END_LUNCH, CLOCK_OUT FROM timeclock WHERE USERNAME = '$sessuser'&quot;;
  
  $query = mysqli_query($dbc, $select) or die(mysqli_error($dbc));
  $resnum = mysqli_num_rows($query);
  
  //echo $resnum;
  while($row = $query-&gt;fetch_assoc())
  {
      $out[] = $row;
  }
  
  echo json_encode(array('data' =&gt; $out));
  mysqli_free_result($query);
  $dbc-&gt;close();
  
  ?&gt;
  </code></pre>