Wie zum senden von Daten generiert, die von python zu jquery datatable für die Darstellung

A] Zusammenfassung des Problems:

Mithilfe von jquery datatable (http://www.datatables.net/) auf der html-Seite senden Möchten, Daten generiert durch die Abfrage von python, von javascript, so dass es gedruckt werden kann in der Tabelle. Wenn jemand bieten kann, eine Beispiel-Implementierung für dieses oder ein starter-link, es wäre genial.

B] Modelle Struktur:

Die hierarchische Beziehung zwischen den Modellen wie folgt:

UserReportecCountry (einer) UserReportedCity(viele)

UserReportedCity(einer) UserReportedStatus(viele)

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)

C] HTML-code Auszug

Den HTML-code enthält jquery-datatable-javascript-Bibliotheken. Die datatable-javascript-Bibliothek so konfiguriert ist, dass mehrspaltige Sortierung.

<!--importing javascript and css files -->
<style type="text/css">@import "/media/css/demo_table.css";</style>  
<script type="text/javascript" language="javascript" src="/media/js/jquery.js"></script>
<script type="text/javascript" src="/media/js/jquery.dataTables.js"></script>

<!-- Configuring the datatable javascript library to allow multicolumn sorting -->
<script type="text/javascript">
    /* Define two custom functions (asc and desc) for string sorting */
    jQuery.fn.dataTableExt.oSort['string-case-asc']  = function(x,y) {
        return ((x < y) ? -1 : ((x > y) ?  1 : 0));
    };

    jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x,y) {
        return ((x < y) ?  1 : ((x > 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
        ]
    } );
} );
</script>

<!-- Table containing the data to be printed--> 
<div id="userReportedData">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="user_reported_data_table">
    <thead>
        <tr>
            <th>Country</th>
            <th>City</th>
            <th>Status</th>
            <th>Reported at</th>
        </tr>
    </thead>

    <tbody>
        <tr class="gradeA">
            <td>United Status</td>
            <td>Boston</td>
            <td>Up</td>
            <td>5 minutes back</td>
        </tr>
    </tbody>
</table>    

C] python-code exceprt:

Code-Auszug kann die Abfrage der Daten, legt die Daten in einer "Vorlage" aus und senden Sie es an die HTML-Seite ( das ist natürlich nicht funktionieren 🙁 )

__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")         

D] Techniken:

1] Jquery

2] Jquery-datatable -

3] Google app engine

4] Python

5] Django.

danke für das Lesen.

[EDIT#1]

Code basiert auf der Antwort von @Mark

Habe versucht, die folgenden

<!-- script snippet to setup the properties of the datatable(table which will contain site status    reported by the users) -->
<script type="text/javascript">
    /* Define two custom functions (asc and desc) for string sorting */
    jQuery.fn.dataTableExt.oSort['string-case-asc']  = function(x,y) {
        return ((x < y) ? -1 : ((x > y) ?  1 : 0));
    };

    jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x,y) {
        return ((x < y) ?  1 : ((x > 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"
    } );
} );
</script>

<div id="userReportedData">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="user_reported_data_table">
    <thead>
        <tr>
            <th>Country</th>
            <th>City</th>
            <th>Status</th>
            <th>Reported at</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>    

Python-code, der name der Datei ist ajaxsource.py

vom django.utils import simplejson
von google.appengine.ext import db

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')

Dies ist jedoch nur gezeigt, "Verarbeitung" auf den Tisch.

Paar Fragen, Wie würde die datatable wissen, wo Sie drucken das Land, wo auf Druck der Stadt und des status?

[EDIT#2] - Code, basierend auf die Antwort von @Abdul Kader

<script type="text/javascript" src="/media/js/jquery.dataTables.js"></script>

<!-- script snippet to setup the properties of the datatable(table which will contain site status reported by the users) -->
<script type="text/javascript">
    /* Define two custom functions (asc and desc) for string sorting */
    jQuery.fn.dataTableExt.oSort['string-case-asc']  = function(x,y) {
        return ((x < y) ? -1 : ((x > y) ?  1 : 0));
    };

    jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x,y) {
        return ((x < y) ?  1 : ((x > 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
        ]
    } );
} );
</script>


<!-- Table containing the data to be printed--> 
<div id="userReportedData">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="user_reported_data_table">
    <thead>
        <tr>
            <th>Country</th>
            <th>City</th>
            <th>Status</th>
            <th>Reported at</th>
        </tr>
    </thead>

   <tbody>
    <tr class="gradeA">
         {% for country in all_data_from_database %}
         <td>{{country}}</td>
         {%endfor%}
    </tr>
    </tbody>
</table>  

Python-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") 

Artikel gedruckt in der html-Seite:

[EDIT#3] BEARBEITEN, das funktioniert.

Modifizierte ich die Lösung von @Abdul Kader ein bisschen, und die folgenden gearbeitet hat

HTML-code:

<!-- Table containing the data to be printed--> 
<div id="userReportedData">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="user_reported_data_table">
    <thead>
        <tr>
            <th>Country</th>
            <th>City</th>
            <th>Status</th>
            <th>Reported at</th>
        </tr>
    </thead>

   <tbody>

    {% for country in countries %}
        {%for city in country.cities %}
            {%for status in city.statuses %}
                <tr class="gradeA">
                    <td>{{country.country_name}}</td>
                    <td>{{city.city_name}}</td>
                    <td>{{status.status}}</td>
                    <td>{{status.date_time }}</td>
                </tr>
            {%endfor%}  
        {%endfor%}      
    {%endfor%}

    </tbody>
</table>  

Python-code:

def get(self):

   __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))

Verbesserung Anfrage: ich glaube, dies ist eine sehr einfache Möglichkeit, dies zu tun, und es könnte eine Lösung sein, das kann bedeuten, ein bisschen ajax oder mehr Eleganz. Wenn jemand ein Beispiel oder eine open-source-Projekt, das mithilfe von Datentabellen basierend auf python, lassen Sie es mich bitte wissen.

Code-review-Anfrage: Kann jemand bitte überprüfen Sie den code, die ich getan haben und lassen Sie mich wissen, wenn ich mache einen Fehler oder etwas, das getan werden kann, besser oder effizienter.