JQuery Datatable функциональность не работает, когда данные таблицы заполняются с помощью Javascript

Question

A] Описание проблемы:

Данные для jquery datatable генерируются с использованием функции javascript, которая анализирует данные JSON, возвращаемые python.Результирующая HTML-таблица в браузере отображается правильно, но jquery datatable не может распознать данные, и функциональность datatable не работает.Когда я смотрю на источник 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) Настройка таблицы HTML для таблицы данных jQuery:

<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, который анализирует возвращенный вывод JSONиз python и заполняет «tbody» данных:

Здесь 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»datatable, и он пуст:

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

И мне кажется, что это проблема

В браузере, однако, я вижу, что таблица загружается правильно, однако таблица данных показывает0 записей и функции поиска сортировки очищают таблицу

Answer 1

Вместо простого добавления необработанного html к телу таблицы, вы должны использовать метод DataTables fnAddData, чтобы он мог подбирать новые строки.

Так что для вас ваш код будет выглядеть примерно так

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(); после завершения цикла, чтобы добавить все строки сразу