A]问题总结：
使用html页面上的jquery datatable(http://www.datatables.net/),想要将查询生成的数据从python发送到javascript,以便可以将其打印在表中.如果有人可以为此或入门链接提供示例实现,那就太好了.
B]模型结构：
这些模型之间的层次关系如下：
UserReportecCountry(一个)到UserReportedCity(很多)
UserReportedCity(一个)到UserReportedStatus(许多)
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代码摘录
HTML代码包括jquery,数据表javascript库. datatable javascript库配置为允许多列排序.
<!--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代码摘录：
代码摘录对数据进行查询,将数据放入“模板”中,然后将其发送到HTML页面(这当然是行不通的:()
__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]正在使用的技术：
1] jQuery
2] jQuery数据表
3] Google应用引擎
4] Python
5] Django.
感谢您的阅读.
[EDIT#1]
基于@Mark给出的响应的代码
尝试了以下
<!-- 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代码,文件名为ajaxsource.py
从django.utils导入simplejson
从google.appengine.ext导入数据库
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')
但是,这仅在表上显示“正在处理”.
几个查询,数据表如何知道在哪里打印国家,在哪里打印城市和状态？
[EDIT#2]基于@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代码-
__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")
在html页面中打印的项目：
[EDIT#3]编辑有效.
我对@Abdul Kader提供的解决方案进行了一些修改,以下内容已奏效
HTML代码：
<!-- 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代码：
def get()：
__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))
增强要求：我认为这是执行此操作的非常基本的方法,并且可能存在可能涉及一些ajax或更优雅的解决方案.如果有人使用基于python的数据表的示例或开源项目,请告诉我.
代码检查请求：有人可以检查我完成的代码,如果我做错了或者可以做得更好或更有效的方法,请告诉我.
解决方法:
您只需像通常那样简单地从数据存储中创建表.插件将负责其余的工作.
楷模
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)
Python
class MainPage(webapp.RequestHandler):
def get(self):
User_country=UserReportedCountry.all().fetch(1000)
return self.response.out.write(template.render('#pathtohtml','{'user_c':User_country}))
的HTML
<!--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">
{% for country in user_c %}
<td>{{country}}</td>
{%endfor%}
</tr>
</tbody>
</table>