title: How do I initialize DataTables.js' load function AFTER creating the table with jQuery?
body: <p>I am creating a table with ajax. The table displays properly, and is valid html, but I can't initialize DataTables correctly.</p>
  
  <p>I have this html code:</p>
  
  <pre><code>&lt;table class="dat"&gt;
  </code></pre>
  
  <p>And in my ajax:</p>
  
  <pre><code>complete: $('.dat').DataTable(),
  </code></pre>
  
  <p>The table is formatted according to DataTables.js' table guidelines:</p>
  
  <pre><code>&lt;table class="dat"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Logo&lt;/th&gt;
              &lt;th&gt;Food Name&lt;/th&gt;
              &lt;th&gt;Stuff&lt;/th&gt;
              &lt;th&gt;Code&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Image&lt;/td&gt;
              &lt;td&gt;Stuff here&lt;/td&gt;
              &lt;td&gt;Description&lt;/td&gt;
              &lt;td&gt;Code&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And part of the jquery AJAX:</p>
  
  <pre><code>success: function (z) {
      var json = $.parseJSON(z.d);
  
      var table = '&lt;table class="dat"&gt;';
      table += "  &lt;thead&gt;";
      table += "      &lt;tr&gt;;"
      table += "          &lt;th&gt;Logo&lt;/th&gt;";
      table += "          &lt;th&gt;Food Name&lt;/th&gt;";
      table += "          &lt;th&gt;Stuff&lt;/th&gt;";
      table += "          &lt;th&gt;Code&lt;/th&gt;";
      table += "     &lt;/tr&gt;";
      table += " &lt;/thead&gt;";
  
      $.each(json, function (i, obj) {
          //console.log(obj);
          table += "  &lt;tbody&gt;";
          table += "      &lt;tr&gt;";
          table += "          &lt;td&gt; Image (" + obj.Logo + ")&lt;/td&gt;";
          table += "          &lt;td&gt;" + obj.FoodName + "&lt;/td&gt;";
  
          table += "          &lt;td&gt;";
          $.each(obj.Text, function (j, t) {
              table += t + "; ";
          });
          table += "          &lt;/td&gt;"; // Stuff
  
          table += "          &lt;td&gt;" + obj.Code + "&lt;/td&gt;";
          table += "      &lt;/tr&gt;";
      });
      table += "  &lt;/tbody&gt;";
      table += "&lt;/table&gt;";
      $('.search_results').append(table);
      $('.dat').DataTable();
  },
  </code></pre>
  
  <p>The html is showing up correctly without any formatting issues, and there are also no errors. The only thing I can do is use the search feature, and it doesn't clear the irrelevant content. Is DataTable() being called before the append feature? That's what I suspected, but the search feature works almost perfectly.</p>
  
  <p>If so, how do I call it after the table is done being loaded? If not, what am I doing wrong?</p>
  
  <p>Thanks in advance!</p>