jQuery Datatable functionality not working when table data is populated by using Javascript

klusener

A] Problem Summary:

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.

B] Code excerpts:
1] jQuery datatable setup

[code]

/* 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() {

$('#datatable_for_current_users').dataTable( {
"aaSorting": [ [3,'desc'] ],
"aoColumns": [
null,
null,
{ "sType": 'string-case' },
null
]
} );

} );

[/code]

2] HTML table setup for the jQuery datatable
[code]

<!-- Table containing the data to be printed-->



Country
City
Status
Reported at



<!-- contents of the tbody will be loaded by javascript method XXX -->





[/code]

3] Javascript that parses the JSON output returned from python and populates the “tbody” of the datatable.

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.

[code]
$.post("/AjaxRequest", {
selected_country_name: $users_country,
selected_city_name: $users_city
},
function LoadUsersDatatable(data) {
var tbody = $("#datatable_for_current_users > tbody").html("");
jsonData = jQuery.parseJSON(data);

for (var i = 0; i < jsonData.length; i++)
{
var citydata = jsonData[i];
var rowText = "" + citydata.city.country.country_name + "" + citydata.city.city_name + "" + citydata.status + "" + citydata.date_time.ctime + "";
$(rowText).appendTo(tbody);
}
}

);

[/code]

4] When the HTML page is rendered, I check the “tbody” of the datatable and it is empty

[code]

<!-- contents of the tbody will be loaded by javascript method XXX -->

[/code]

Image:

image of how the table looks currently on the html page

http://i.imgur.com/FyVJ3.png

klusener

After a bit more research, i believe i need to follow the example given here in-order to make sure that the data-table gets filled in with the necessary values. I will try this out and post the results.

http://www.mccran.co.uk/index.cfm/2010/4/29/JQuery-Datatables-plugin-example-using-a-server-side-data-request-coldfusion