使用Javascript填充表数据时，jQuery Datatable功能不起作用

Question

A]问题摘要：

jQuery datatable的数据是使用javascript函数生成的，该函数解析python返回的JSON数据。 浏览器中的结果HTML表正确显示，但是jquery数据表无法识别该数据，并且数据表功能不起作用。 当我查看HTML Page源代码时，也无法在表中看到数据。

B]代码节选：

1）jQuery数据表设置：

/* 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）jQuery数据表的HTML表设置：

<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）解析从python返回的JSON输出并填充数据表“ tbody”的Javascript：

在这里javascript将用户国家和城市发送给python代码。 然后，Python代码查找特定用户的数据库对象，并将JSON数据发送回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）呈现HTML页面时，我检查数据表的“正文”，它为空：

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

对我来说这似乎是个问题

但是，在浏览器中，我看到表已正确加载，但是数据表显示了0个条目，并且搜索排序功能清空了该表

Answer 1

您必须使用DataTables fnAddData方法来拾取新行，而不是将原始html附加到表主体中。

因此对您来说，您的代码将如下所示

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

添加行后，最后的true只会重绘表。 如果需要，可以将其更改为false并调用dt.fnDraw(); 循环完成后，一次添加所有行