title: how to use datatable with dynamically created table
body: <p>I have a jsp which onload calls a js in which a table is created dynamically.
  The situation is that I have never worked on jquery earlier, all I know is javascript.</p>
  
  <p>I made two scenarios:</p>
  
  <p>case one : when I create static table on the jsp page itself it works flawlessly.
  case two : when I try to load the same table which is created by dynamic javascript it fails.</p>
  
  <p>Case I  Working code </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  &lt;title&gt;JSP Page&lt;/title&gt;
  &lt;script  src="../js/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../js/createDynamicTable.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../js/jquery.dataTables.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
  $('#testTable').dataTable();
  }); 
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;div id="tableDataDiv"&gt;
  &lt;table id="testTable"&gt;
  &lt;thead&gt;                   
  &lt;th&gt;h1&lt;/th&gt;
  &lt;th&gt;h2&lt;/th&gt;
  &lt;th&gt;h3&lt;/th&gt;                   
  &lt;/thead&gt;
  
  
  &lt;tbody&gt;
  &lt;tr&gt;
  &lt;td&gt;1&lt;/td&gt;
  &lt;td&gt;2&lt;/td&gt;
  &lt;td&gt;3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;4&lt;/td&gt;
  &lt;td&gt;5&lt;/td&gt;
  &lt;td&gt;6&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;7&lt;/td&gt;
  &lt;td&gt;8&lt;/td&gt;
  &lt;td&gt;9&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Case II  Not Working code </p>
  
  <p>jsp code</p>
  
  <pre><code>&lt;%@page contentType="text/html" pageEncoding="UTF-8"%&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  &lt;title&gt;JSP Page&lt;/title&gt;
  &lt;script  src="../js/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../js/createDynamicTable.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../js/jquery.dataTables.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
  $('#testTable').dataTable();
  }); 
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="getTableData();"&gt;
  
  
  &lt;div id="tableDataDiv"&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  
  js code
  
  function getTableData(){
  
  var tableDataDivObj = document.getElementById("tableDataDiv");
  
  var tableObj = document.createElement("table");
  tableObj.id = 'testTable';
  
  // header
  var theadObj = document.createElement("thead");
  
  var thObj = document.createElement("th");
  thObj.innerHTML = 'h1';
  theadObj.appendChild(thObj);
  
  thObj = document.createElement("th");
  thObj.innerHTML = 'h2';
  theadObj.appendChild(thObj);
  
  thObj = document.createElement("th");
  thObj.innerHTML = 'h3';
  theadObj.appendChild(thObj);
  
  tableObj.appendChild(theadObj);
  
  // body
  var tbodyObj;
  var trObj;
  var tdObj;
  tbodyObj = document.createElement("tbody");
  
  var count = 1;
  for(i = 0; i &lt; 3; i++){
  trObj = document.createElement("tr");
  
  for(j = 0; j &lt; 3; j++){
  tdObj = document.createElement("td");
  tdObj.innerHTML = count;
  trObj.appendChild(tdObj);
  count++;
  }
  
  tbodyObj.appendChild(trObj);
  }
  
  
  tableObj.appendChild(tbodyObj);
  
  tableDataDivObj.appendChild(tableObj);
  }
  </code></pre>
  
  <p>Once the table is created dynamically, we append it to the div on the jsp page.</p>
  
  <p>Kindly suggest any modification, suggestions so that I can get this code work.
  this is just an example I have created of my real application .
  which involves complete mvc, where table data is retrived from the service methods and dao files. I am able to get the data into the table(I made sure after getting an alert on jsp page). I am not able to use datatable on the id of the table.</p>
  
  <p>Thanks in advance!</p>