title: How to send data generated from python to jquery datatable for rendering
body: <p><strong>A] Summary of the problem:</strong></p>
  
  <p>Using jquery datatable (<a href="http://www.datatables.net/" rel="nofollow noreferrer">http://www.datatables.net/</a>) on the html page, Want to send data generated by query from python to javascript, so that it can be printed in the table. If someone can provide a sample implementation for this or a starter link, it would be awesome.</p>
  
  <p><strong>B] Models structure:</strong></p>
  
  <p>The hierarchical relationship between the models is as follows:</p>
  
  <p>UserReportecCountry (one) to UserReportedCity(many)</p>
  
  <p>UserReportedCity(one) to UserReportedStatus(many)</p>
  
  <pre><code>class UserReportedCountry(db.Model):
    country_name = db.StringProperty( required=True,
                            choices=['Afghanistan','Aring land Islands']
                           )
  
  class UserReportedCity(db.Model):
    country = db.ReferenceProperty(UserReportedCountry, collection_name='cities')
    city_name = db.StringProperty(required=True)   
  
  class UserReportedStatus(db.Model):
    city = db.ReferenceProperty(UserReportedCity, collection_name='statuses')
    status = db.BooleanProperty(required=True)
    date_time = db.DateTimeProperty(auto_now_add=True)
  </code></pre>
  
  <p><strong>C] HTML code excerpt</strong></p>
  
  <p>The HTML code includes jquery , datatable javascript libraries. The datatable javascript library is configured to allow multicolumn sorting.</p>
  
  <pre><code>&lt;!--importing javascript and css files --&gt;
  &lt;style type="text/css"&gt;@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" src="/media/js/jquery.dataTables.js"&gt;&lt;/script&gt;
  
  &lt;!-- Configuring the datatable javascript library to allow multicolumn sorting --&gt;
  &lt;script type="text/javascript"&gt;
      /* 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() {
      /* Build the DataTable with third column using our custom sort functions */
      // #user_reported_data_table is the name of the table which is used to display the data reported by the users
      $('#user_reported_data_table').dataTable( {
          "aaSorting": [ [0,'asc'], [1,'asc'] ],
          "aoColumns": [
              null,
              null,
              { "sType": 'string-case' },
              null
          ]
      } );
  } );
  &lt;/script&gt;
  
  &lt;!-- Table containing the data to be printed--&gt; 
  &lt;div id="userReportedData"&gt;
  &lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="user_reported_data_table"&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;tr class="gradeA"&gt;
              &lt;td&gt;United Status&lt;/td&gt;
              &lt;td&gt;Boston&lt;/td&gt;
              &lt;td&gt;Up&lt;/td&gt;
              &lt;td&gt;5 minutes back&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;    
  </code></pre>
  
  <p>               </p>
  
  <p><strong>C] python code exceprt:</strong></p>
  
  <p>The code excerpt does the query of the data, puts the data in a "template" and send it to the HTML page ( this is off-course not working right now :( )</p>
  
  <pre><code>__TEMPLATE_ALL_DATA_FROM_DATABASE = 'all_data_from_database'
  def get(self): 
    template_values = {
          self.__TEMPLATE_ALL_DATA_FROM_DATABASE: self.get_data_reported_by_users()
      }
  
      self.response.out.write(template.render(self.__MAIN_HTML_PAGE, template_values))
  
  def get_data_reported_by_users(self):
      return db.GqlQuery("SELECT * FROM UserReportedCountry ORDER BY country_name ASC")         
  </code></pre>
  
  <p><strong>D] Technologies being used:</strong></p>
  
  <p>1] Jquery</p>
  
  <p>2] Jquery datatable</p>
  
  <p>3] Google app engine</p>
  
  <p>4] Python</p>
  
  <p>5] Django.</p>
  
  <p>thank you for reading.</p>
  
  <p>[EDIT#1] </p>
  
  <p>Code based on the response given by @Mark</p>
  
  <p>Tried the following</p>
  
  <pre><code>&lt;!-- script snippet to setup the properties of the datatable(table which will contain site status    reported by the users) --&gt;
  &lt;script type="text/javascript"&gt;
      /* 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() {
      /* Build the DataTable with third column using our custom sort functions */
      // #user_reported_data_table is the name of the table which is used to display the data reported by the users
      $('#user_reported_data_table').dataTable( {
          "aaSorting": [ [0,'asc'], [1,'asc'] ],
          "aoColumns": [
              null,
              null,
              { "sType": 'string-case' },
              null
          ],
          /* enabling serverside processing, specifying that the datasource for this will come from  
             file ajaxsource , function populate_world_wide_data
          */
          "bProcessing": true,
          "bServerSide": true,
          "sAjaxSource": "/ajaxsource/populate_world_wide_data"
      } );
  } );
  &lt;/script&gt;
  
  &lt;div id="userReportedData"&gt;
  &lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="user_reported_data_table"&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;/tbody&gt;
  &lt;/table&gt;    
  </code></pre>
  
  <p>Python code, name of the file is ajaxsource.py</p>
  
  <p>from django.utils import simplejson
     from google.appengine.ext import db</p>
  
  <pre><code>def populate_world_wide_data(self,request):
      my_data_object = db.GqlQuery("SELECT * FROM UserReportedCountry ORDER BY country_name ASC") 
      json_object = simplejson.dumps(my_data_object)        
      self.response.out.write( json_object, mimetype='application/javascript')
  </code></pre>
  
  <p>This however only showed "processing" on the table. </p>
  
  <p>Couple of queries, How would the datatable know where to print the country, where to print the city and status?</p>
  
  <p>[EDIT#2] Code based on the response given by @Abdul Kader</p>
  
  <pre><code>&lt;script type="text/javascript" src="/media/js/jquery.dataTables.js"&gt;&lt;/script&gt;
  
  &lt;!-- script snippet to setup the properties of the datatable(table which will contain site status reported by the users) --&gt;
  &lt;script type="text/javascript"&gt;
      /* 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() {
      /* Build the DataTable with third column using our custom sort functions */
      // #user_reported_data_table is the name of the table which is used to display the data reported by the users
      $('#user_reported_data_table').dataTable( {
          "aaSorting": [ [0,'asc'], [1,'asc'] ],
          "aoColumns": [
              null,
              null,
              { "sType": 'string-case' },
              null
          ]
      } );
  } );
  &lt;/script&gt;
  
  
  &lt;!-- Table containing the data to be printed--&gt; 
  &lt;div id="userReportedData"&gt;
  &lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="user_reported_data_table"&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;tr class="gradeA"&gt;
           {% for country in all_data_from_database %}
           &lt;td&gt;{{country}}&lt;/td&gt;
           {%endfor%}
      &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;  
  </code></pre>
  
  <p>       </p>
  
  <p>Python code --</p>
  
  <pre><code>__TEMPLATE_ALL_DATA_FROM_DATABASE = 'all_data_from_database'
  
  def get(self): 
      template_values = {
          self.__TEMPLATE_ALL_DATA_FROM_DATABASE: self.get_data_reported_by_users()
      }
  
      #rendering the html page and passing the template_values
      self.response.out.write(template.render(self.__MAIN_HTML_PAGE, template_values))
  
  def get_data_reported_by_users(self):
      return db.GqlQuery("SELECT * FROM UserReportedCountry ORDER BY country_name ASC") 
  </code></pre>
  
  <p>Item printed in the html page:</p>
  
  <p><img src="https://i.stack.imgur.com/CkufL.png" alt="enter image description here"></p>
  
  <p>[EDIT#3] <strong>EDIT that has worked.</strong></p>
  
  <p>I modified the solution given by @Abdul Kader a bit and the following has worked</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;!-- Table containing the data to be printed--&gt; 
  &lt;div id="userReportedData"&gt;
  &lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="user_reported_data_table"&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;
  
      {% for country in countries %}
          {%for city in country.cities %}
              {%for status in city.statuses %}
                  &lt;tr class="gradeA"&gt;
                      &lt;td&gt;{{country.country_name}}&lt;/td&gt;
                      &lt;td&gt;{{city.city_name}}&lt;/td&gt;
                      &lt;td&gt;{{status.status}}&lt;/td&gt;
                      &lt;td&gt;{{status.date_time }}&lt;/td&gt;
                  &lt;/tr&gt;
              {%endfor%}  
          {%endfor%}      
      {%endfor%}
  
      &lt;/tbody&gt;
  &lt;/table&gt;  
  </code></pre>
  
  <p>       </p>
  
  <p>Python code:</p>
  
  <p>def get(self): </p>
  
  <pre><code>   __TEMPLATE_ALL_DATA_FROM_DATABASE = 'countries'
  
      country_query = UserReportedCountry.all().order('country_name')
      country = country_query.fetch(10)
  
      template_values = {
          self.__TEMPLATE_ALL_DATA_FROM_DATABASE: country
      }
  
      self.response.out.write(template.render(self.__MAIN_HTML_PAGE, template_values))
  </code></pre>
  
  <p>Enhancement Request: I believe this is a very basic way to do this and there might be a solution that can involve a bit of ajax or more elegance. If someone has a example or a open source project that is using datatables based on python, please let me know. </p>
  
  <p>Code review request: Can someone please review the code that i have done and let me know if i am doing a mistake or something that can be done better or in a more efficient manner.</p>