title: populate data on datatable does not work
body: <p>I would like to populate my data on a datatable which is plotted on a modal, I searched a lot of link and I came across one interesting topic..</p>
  
  <p>I have a button that will trigger the function to get the data from the servlet..</p>
  
  <pre><code>&lt;button class="w3-btn w3-black w3-round-xxlarge w3-hover-green" id="viewButton" onClick="loadDoc(this.id)"&gt;View&lt;/button&gt;
  </code></pre>
  
  <p>my ajax code..</p>
  
  <pre><code>&lt;script&gt;
  function loadDoc(id) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 &amp;&amp; this.status == 200) {
        openModal(this.responseText);
      }
    };
    xhttp.open("GET", "/ETEEAP/ViewApplication?id=" + id, true);
    xhttp.send();
  }
  function openModal(id){
  document.getElementById('id01').style.display='block';
  loadTable(id);
  }   
  &lt;/script&gt;
  </code></pre>
  
  <p>I was able to open the modal but it returns an error "REQUESTED UNKNOWN"
  <a href="http://datatables.net/tn/4" rel="nofollow">http://datatables.net/tn/4</a> for details of the error..</p>
  
  <p>this is my modal codes..</p>
  
  <pre><code>&lt;div id="id01" class="w3-modal"&gt;
  &lt;div class="w3-modal-content w3-animate-top w3-card-8" style="margin-top:20px;"&gt;
  &lt;header class="w3-container w3-teal"&gt;
    &lt;span onclick="document.getElementById('id01').style.display='none';"
    class="w3-closebtn"&gt;&amp;times;&lt;/span&gt;
    &lt;h2&gt;Program Details&lt;/h2&gt;
  &lt;/header&gt;
  &lt;div class="w3-container w3-light-grey" style="margin-bottom: 50px;"&gt;
    &lt;div class="w3-container w3-padding-8 w3-opacity w3-white w3-round-xlarge w3-border w3-hover-border-black"
      style="margin: 10px 10px 10px 10px;"&gt;
          &lt;table id="myTable1" class="display"&gt;
          &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;SUBJECT&lt;/th&gt;
              &lt;th&gt;COURSE&lt;/th&gt;
              &lt;th&gt;UNITS&lt;/th&gt;
              &lt;th&gt;SEMESTER&lt;/th&gt;
              &lt;th&gt;YEAR LEVEL&lt;/th&gt;
              &lt;th&gt;STATUS&lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tfoot&gt;
          &lt;tr&gt;
              &lt;th&gt;SUBJECT&lt;/th&gt;
              &lt;th&gt;COURSE&lt;/th&gt;
              &lt;th&gt;UNITS&lt;/th&gt;
              &lt;th&gt;SEMESTER&lt;/th&gt;
              &lt;th&gt;YEAR LEVEL&lt;/th&gt;
              &lt;th&gt;STATUS&lt;/th&gt;
          &lt;/tr&gt;
          &lt;/tfoot&gt;
          &lt;tbody&gt;
      &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;script&gt;
          function loadTable(id){
              alert(id);
              $('#myTable1').DataTable({
                  aaData : id,
                  aoColumns : [
                      {mDataProp : "SUBJECT"},
                      {mDataProp : "COURSE"},
                      {mDataProp : "UNITS"},
                      {mDataProp : "SEMESTER"},
                      {mDataProp : "YEAR LEVEL"},
                      {mDataProp : "STATUS"}
                              ]
               });
          }
      &lt;/script&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>this is the response I get from the servlet..</p>
  
  <pre><code> [{"SUBJECT":"Programming I","UNITS":"3","SEMESTER":"First","COURSE":"BSCPE","YEAR LEVEL":"First","STATUS":"PENDING"}, {"SUBJECT":"Communication Arts I","UNITS":"2","SEMESTER":"First","COURSE":"BSCPE","YEAR LEVEL":"First","STATUS":"PENDING"}, {"SUBJECT":"Programming II","UNITS":"3","SEMESTER":"Second","COURSE":"BSCPE","YEAR LEVEL":"First","STATUS":"PENDING"}, {"SUBJECT":"COMORG","UNITS":"4","SEMESTER":"Second","COURSE":"BSCPE","YEAR LEVEL":"Second","STATUS":"PENDING"}]
  </code></pre>
  
  <p>when I run this program it throws the error above.. but when I assign and hardcode the specified response on a variable it works fine.. how come is it not working? can anyone help me..</p>