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

Posted 2023-05-09

【中文标题】使用 Javascript 填充表数据时，jQuery Datatable 功能不起作用

【英文标题】：jQuery Datatable functionality not working when table data is populated by using Javascript

【发布时间】：2011-08-10 06:08:12

【问题描述】：

A] 问题总结：

使用 javascript 函数生成 jquery 数据表的数据，该函数解析 python 返回的 JSON 数据。 浏览器中的结果 html 表正确显示，但 jquery 数据表无法识别数据并且数据表功能无法正常工作。当我查看 HTML 页面源时，我也看不到表中的数据。

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”，它是空的：

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

对我来说这似乎是个问题

然而，在浏览器中，我看到表格加载正确，但数据表显示 0 个条目，搜索排序功能清空表格

【问题讨论】：

仍然对此感到困惑。我要检查当源什么都没有时html是如何获取数据的。

使用 firebug 进行一些调试后，我可以看到 与行一起正确加载，但“查看源代码”未显示数据，这意味着数据表可能不适用于此技术.我开始认为这就是javascript的工作方式。多读一点。 在这里找到了一个解决方案，mccran.co.uk/index.cfm/2010/4/29/…。今天将尝试这个并发布结果。

【参考方案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(); 以一次添加所有行