title: Simple DataTable initialization with Ajax and PHP
body: <p>I'm just having some trouble initializing a DataTable using Ajax and PHP. According to the inspector the error is:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'length' of undefined jquery.dataTables.js:2649
  (anonymous function) jquery.dataTables.js:2649
  oSettings.jqXHR.$.ajax.success jquery.dataTables.js:8749
  c jquery.js:3048
  p.fireWith jquery.js:3160
  k jquery.js:8235
  r jquery.js:8778
  </code></pre>
  
  <p>I've followed the instructions as on datatable website but apparently I'm doing something wrong. It's not the php part, I've just checked it and it is returning a json file.</p>
  
  <p>Here's what I've got.</p>
  
  <p>Thanks in advance.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Chromo Insiders&lt;/title&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="DataTables/media/js/jquery.dataTables.js"&gt;&lt;/script&gt;
  &lt;script type="application/javascript" language="javascript" src="insiders.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="ci_style.css" /&gt;
  &lt;style type="text/css"&gt;
      @import 'DataTables/media/css/demo_table_jui.css';
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;header&gt;
      &lt;h1&gt;Chromo Insiders&lt;/h1&gt;
  &lt;/header&gt;
  
  &lt;table id="datatables"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;email&lt;/th&gt;
              &lt;th&gt;Last Name&lt;/th&gt;
              &lt;th&gt;First Name&lt;/th&gt;
              &lt;th&gt;Date Registered&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's the script:</p>
  
  <pre><code>$(document).ready(function(e) {
  
  
  $('#datatables').dataTable( {
          "bProcessing": true,
          "sAjaxSource": 'process.php'
      } );
  
  });
  </code></pre>
  
  <p>Just in case you need to take a look to the php code:</p>
  
  <pre><code>&lt;?php
  
          try {
              $conn = require_once 'dbConnect.php';
  
              $sql = "SELECT email, lastName, firstName, state, dateRegistered FROM Users";
  
              $result = $conn-&gt;prepare($sql) or die ($sql);
  
              if(!$result-&gt;execute()) return false;
  
              if($result-&gt;rowCount() &gt; 0) {
                  $json = array();
                  while($row = $result-&gt;fetch()){
                      $json[] = array(
                          'email' =&gt; $row['email'],
                          'lastName' =&gt; $row['lastName'],
                          'firstName' =&gt; $row['firstName'],
                          'dateRegistered' =&gt; $row['dateRegistered'],
                          'state' =&gt; $row['state']
                      );
                  }
  
                  $json['success'] = true;
                  echo json_encode($json);
              }
          } catch(PDOException $e) {
              echo 'Error: ' . $e-&gt;getMessage();
          }
  ?&gt;
  </code></pre>