title: jQuery Datatable functionality not working when table data is populated by using Javascript
body: <p><strong>A] Problem Summary:</strong></p>
  
  <p>Data for jquery datatable is being generated using javascript function which parses JSON data returned by python. 
  Resultant HTML Table in the browser shows up correctly, but jquery datatable cannot recognize the data and datatable functionality is not working. When I look at the HTML Page source, I cannot see the data in the table either.</p>
  
  <p><strong>B] Code excerpts:</strong></p>
  
  <p><strong>1) jQuery datatable setup:</strong></p>
  
  <pre><code>/* Define two custom functions (asc and desc) for string sorting */
  jQuery.fn.dataTableExt.oSort['string-case-asc']  = function(x,y) {
      return ((x &lt; y) ? -1 : ((x &gt; y) ?  1 : 0));
  };
  
  jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x,y) {
      return ((x &lt; y) ?  1 : ((x &gt; y) ? -1 : 0));
  };
  
  $(document).ready(function() {
  
      $('#datatable_for_current_users').dataTable( {
          "aaSorting": [ [3,'desc'] ],
          "aoColumns": [
              null,
              null,
              { "sType": 'string-case' },
              null
          ]
      });
  
  });     
  </code></pre>
  
  <p><strong>2) HTML table setup for the jQuery datatable:</strong></p>
  
  <pre><code>&lt;div id="your_city"&gt;     
       &lt;!-- Table containing the data to be printed--&gt; 
       &lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="datatable_for_current_users"&gt;
           &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Country&lt;/th&gt;
                  &lt;th&gt;City&lt;/th&gt;
                  &lt;th&gt;Status&lt;/th&gt;
                  &lt;th&gt;Reported at&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;!-- contents of the tbody will be loaded by javascript method XXX --&gt;  
          &lt;/tbody&gt;
      &lt;/table&gt;    
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>3) Javascript that parses the JSON output returned from python and populates the “tbody” of the datatable:</strong></p>
  
  <p>Here javascript sends users country and city to python code. Python code then finds out the database objects for the particular user and send out JSON data back to javascript.</p>
  
  <pre><code>$.post("/AjaxRequest", { 
          selected_country_name: $users_country,
          selected_city_name: $users_city  
      },
      function LoadUsersDatatable(data) {
          var tbody = $("#datatable_for_current_users &gt; tbody").html(""); 
          jsonData = jQuery.parseJSON(data);
  
          for (var i = 0; i &lt; jsonData.length; i++) {
              var citydata = jsonData[i];
              var rowText = "&lt;tr class='gradeA'&gt;&lt;td&gt;" + citydata.city.country.country_name + "&lt;/td&gt;&lt;td&gt;" + citydata.city.city_name + "&lt;/td&gt;&lt;td&gt;" + citydata.status + "&lt;/td&gt;&lt;td&gt;" + citydata.date_time.ctime + "&lt;/td&gt;&lt;/tr&gt;";
              $(rowText).appendTo(tbody);
          }
      }    
  );
  </code></pre>
  
  <p><strong>4) When the HTML page is rendered, I check the “tbody” of the datatable and it is empty:</strong></p>
  
  <pre><code>    &lt;tbody&gt;
              &lt;!-- contents of the tbody will be loaded by javascript method XXX --&gt;  
          &lt;/tbody&gt;
  </code></pre>
  
  <p>And to me this appears to be the problem</p>
  
  <p>In the browser however, I see the table being loaded correctly, the datatable however shows 0 entries and search sort functionality empties the table </p>
  
  <p><img src="https://i.stack.imgur.com/5cYBB.png" alt="enter image description here"></p>