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

Question

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:

/* 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
        ]
    });

});     

2) HTML table setup for the jQuery datatable:

<div id="your_city">     
     <!-- Table containing the data to be printed--> 
     <table cellpadding="0" cellspacing="0" border="0" class="display" id="datatable_for_current_users">
         <thead>
            <tr>
                <th>Country</th>
                <th>City</th>
                <th>Status</th>
                <th>Reported at</th>
            </tr>
        </thead>
        <tbody>
            <!-- contents of the tbody will be loaded by javascript method XXX -->  
        </tbody>
    </table>    

</div>

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.

$.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 = "<tr class='gradeA'><td>" + citydata.city.country.country_name + "</td><td>" + citydata.city.city_name + "</td><td>" + citydata.status + "</td><td>" + citydata.date_time.ctime + "</td></tr>";
            $(rowText).appendTo(tbody);
        }
    }    
);

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

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

And to me this appears to be the problem

In the browser however, I see the table being loaded correctly, the datatable however shows 0 entries and search sort functionality empties the table

Answer 1

Rather than simply appending raw html to the table body, you must utilize DataTables fnAddData method for it to pick up the new rows.

So for you, your code would look something like this

var dt = $('#datatable_for_current_users').dataTable();
....

dt.fnAddData({DT_RowClass: 'gradeA', 0: citydata.city.country.country_name,  1: citydata.city.city_name, 2: citydata.status, 3: citydata.date_time.ctime}, true);

The true at the end simply redraws the table after you add the row. If you want, you can change that to false and call dt.fnDraw(); after your loop is finished to add all the rows at once