title: Dynamically Populating DataTables.net DataTable JQuery Plugin
body: <p>I just downloaded <a href="http://datatables.net/index" rel="nofollow">DataTables</a> and this plugin looks great!  I am however having an issue dynamically populating the plugin's DataTable component.  I'm able to populate the table if I have static  and 's in the  and static  and 's in the .  I would however like to dynamically build the ,  and  and populate the  and  entities.  The code below, replaces the static table contents with the XML parsed contents when you hit the enter button.  Any ideas on how to make this completely dynamic?  I tried adding the dataTable class to my table
  $("table.display").addClass("dataTable");</p>
  
  <p><strong>index.html:</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
          &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="index.js"&gt;&lt;/script&gt;
          &lt;title&gt;DataTables example&lt;/title&gt;
          &lt;style type="text/css" title="currentStyle"&gt;
              @import "../../media/css/demo_page.css";
              @import "../../media/css/demo_table.css";
          &lt;/style&gt;
          &lt;script type="text/javascript" language="javascript" src="../../media/js/jquery.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" charset="utf-8"&gt;
              $(document).ready(function() {
                  $('#example').dataTable();
              } );
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body id="dt_example"&gt;
          &lt;div id="container"&gt;
              &lt;table class="query"&gt;
                  &lt;tr&gt;
                      &lt;td class="status"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;input class="query defaultText" type="text"
                          title="Type SQL query here, then press 'Enter' to execute..."&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;div class="full_width big"&gt;
                  DataTables zero configuration example
              &lt;/div&gt;          
              &lt;div id="demo"&gt;
              &lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt; **//want to remove these**
                          &lt;th&gt;Rendering engine&lt;/th&gt;//want to remove these
                          &lt;th&gt;Browser&lt;/th&gt;//want to remove these
                          &lt;th&gt;Platform(s)&lt;/th&gt;//want to remove these
                          &lt;th&gt;Engine version&lt;/th&gt;//want to remove these
                          &lt;th&gt;CSS grade&lt;/th&gt;//want to remove these
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr class="odd gradeX"&gt;**//want to remove these**
                          &lt;td&gt;Trident&lt;/td&gt;//want to remove these
                          &lt;td&gt;Internet
                               Explorer 4.0&lt;/td&gt;//want to remove these
                          &lt;td&gt;Win 95+&lt;/td&gt;//want to remove these
                          &lt;td class="center"&gt; 4&lt;/td&gt;//want to remove these
                          &lt;td class="center"&gt;X&lt;/td&gt;//want to remove these
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
              &lt;/div&gt;
              &lt;div class="spacer"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>index.js:</strong></p>
  
  <pre><code>$(function () {
  $("input.query").keyup(function (e) {
          // check if ENTER key was pressed
          if (e.keyCode == "13") { 
              var data = '&lt;ns1:executeResponse xmlns:ns1="http://sqlws.test.com"&gt;' +
                             '&lt;ns1:return&gt;' + 
                                 '&lt;results&gt;' +
                                 '&lt;row&gt;&lt;deviceid&gt;deviceid1&lt;/deviceid&gt;&lt;domain&gt;1&lt;/domain&gt;&lt;role&gt;manager&lt;/role&gt;&lt;usage&gt;100&lt;/usage&gt;&lt;/row&gt;' +
                                 '&lt;row&gt;&lt;deviceid&gt;deviceid2&lt;/deviceid&gt;&lt;domain&gt;1&lt;/domain&gt;&lt;role&gt;director&lt;/role&gt;&lt;usage&gt;100&lt;/usage&gt;&lt;/row&gt;' +
                                 '&lt;/results&gt;' +
                             '&lt;/ns1:return&gt;' +
                         '&lt;/ns1:executeResponse&gt;';
  
              var $xmlDoc = $($.parseXML(data));
  
              var $txt = $xmlDoc.find('ns1\\:return');
  
              var $firstrow = $txt.children("results").children(":first");
  
              var row;
               $("table.display thead").empty();
                      $("table.display tbody").empty();
  
              $("table.display").addClass("dataTable");
  
              row = $("&lt;tr/&gt;");
              row.append($("&lt;th/&gt;").text("#"));
  
              $firstrow.children().each(function(){
                  row.append($("&lt;th/&gt;").text(this.nodeName));
              });
  
              row.appendTo($("table.display thead"));
  
              var ndx = 0;
              $txt.children("results").children().each(function () {
                  row = $("&lt;tr class='odd gradeX'/&gt;");
                  row.append($("&lt;td/&gt;").text(ndx + 1));
                  $(this).children().each(function () {
                      row.append($("&lt;td/&gt;").text($(this).text()));
                      row.appendTo($("table.display tbody"));
                  });
                  ndx++;
              });
  
              if (ndx == 0) {
                  // no rows returned
                  $("table.display thead").empty();
                  $("table.display tbody").empty();
              }
          }
      });
  });
  </code></pre>