How to pass in python json object to jquery function in parameter aaData
How to pass in python json object to jquery function in parameter aaData
I have the following python code and javascript function. Yet I cannot get the json data to show up in the data table. Any help would be much appreciated.
All my code is below. In the .js file, if I directly place the json object it works as expected (see commented portion in suites.js file). However, if passing in through a function argument, it doesn't work.
Python code:
tornado_webserver.py
class SuitesView(tornado.web.RequestHandler):
def get(self):
data = {}
data['aaData']=[]
data['iTotalRecords'] = 1
data['sEcho'] = 1
data['iTotalDisplayRecords'] = 1
suite = Suite.objects.only('build_id', 'anthill_project', 'branch', 'machine_name', 'tests_successful', 'start_time', 'suite_compiled').filter(build_id=80338)
for s in suite:
data['aaData'].append([s.build_id, s.anthill_project, s.branch, s.machine_name, s.owner_id, s.is_hypertest, s.extra_info])
serialized_q = serializers.serialize('json', suite, ensure_ascii=False)
struct = json.loads(serialized_q)
data = json.dumps(struct[0])
self.render("suites.html", results=data)
HTML code:
suites.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.3/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/tabletools/2.2.3/css/dataTables.tableTools.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug-ins/725b2a2115b/integration/bootstrap/3/dataTables.bootstrap.css">
<link rel="stylesheet" type="text/css" href="//editor.datatables.net/examples/resources/bootstrap/editor.bootstrap.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.js"></script>
<!-- Ajax -->
<!--<script src="{{ static_url('scripts/suites.js') }}" type="application/javascript"></script>-->
</head>
<body>
ID | Name | Spec | Group | Result | Start date | Total |
---|---|---|---|---|---|---|
ID | Name | Spec | Group | Result | Start date | Total |
</body>
</html>
Javascript code:
"suites.js"
(function suites_table(suite) {
$('#suites').dataTable({
"oSearch":{
"sSearch":"",
"bRegex": true,
"bSmart": true
},
/* "aaData": [{"pk": 80338, "model": "suite.suite_deferred_anthill_build_number_build_type_cac7217dc12e6104f2dbaaf78ada62315", "fields": {"anthill_build_number": "2014.10.23-173224", "machine_name": "DEVSITE1", "tests_successful": "1", "is_hypertest": "T", "suite_failures": "0", "start_time": "2014-10-23T09:08:37", "extra_info": "trunk-33 [current]", "suite_compiled": "8", "create_time": "2014-10-23", "suite_id": "core", "end_time": "2014-10-23T09:13:40", "branch": "trunk", "duration": "0 hrs, 5 minutes, 3 seconds", "tests_failures": "7", "unit_model": "T","project_id": null, "build_type": "N", "anthill_project": "dir:core/be"}}],*/
"aaData": $.parseJSON(ats_suite),
"aoColumns":[
{ "mData": "pk" },
{ "mData": "fields.anthill_project" },
{ "mData": "fields.branch" },
{ "mData": "fields.machine_name" },
{ "mData": "fields.tests_successful" },
{ "mData": "fields.start_time" },
{ "mData": "fields.suite_compiled" },
],
"aoColumnDefs":[{
"sTitle":"Suite ID"
, "aTargets": [ "suite_id" ]
},{
"aTargets": [ 0,1 ]
, "bSortable": false
, "mRender": function ( url, type, full ) {
return '<a href="testresults/'+url+'">' + url + '</a>';
}
},{
"aTargets":[ 5 ]
, "sType": "date"
, "mRender": function(date, type, full) {
return (full[3] == "ats")
? new Date(date).toDateString()
: "N/A" ;
}
}]
});
}(jQuery));