JQuery DataTables показывает «Нет данных в таблице», хотя данные отображаются

Question

Я пытаюсь завершить мой код, который динамически создает таблицу с помощью плагина Jquery DataTables.Код работает до определенного момента, он отображает данные, но над данными он также отображает «Нет данных, доступных в таблице».

Из того, что я прочитал, это как-то связано с инициализацией таблицы, Может кто-нибудьПосмотрите, где я иду не так.

$(document).ready(function(){
  $('#userTable').DataTable( {
    "ordering": false,
    paging: false,
    searching: false,
    language: {
    emptyTable: "No data available in table", // 
    loadingRecords: "Please wait .. ", // default Loading...
    zeroRecords: "No matching records found"
    },
    "stripeClasses": [ 'odd-row', 'even-row' ]
  }); 
    $.ajax({
    url: 'server_processing.php',
    type: 'get',
    dataType: 'JSON',
    success: function(response){
        var len = response.length;
        for(var i=0; i<len; i++){
        var recordid = response[i].RecordID;
        var deviceid = response[i].DeviceID;
        var mediatype = response[i].MediaType;
        var screenlocation = response[i].ScreenLocation;
        var promotionname = response[i].PromotionName;
        var fromdate = response[i].FromDate;
        var fromtime = response[i].FromTime;
        var todate = response[i].ToDate;
        var totime = response[i].ToTime;
        var promotionimage = response[i].PromotionImage;
        var orientation = response[i].Orientation;

        var enddate = todate +' '+totime;
        var startdate = fromdate +' '+fromtime;
        var now = new Date();
        var nowdate =  fixDigit(now.getDay()) + '-' +fixDigit(now.getMonth() + 1) + '-' + now.getFullYear()+' ' +now.getHours() + ":" + now.getMinutes();
        // Utility function to prepend zeros to single digits:
        function fixDigit(val){
        return val.toString().length === 1 ? "0" + val : val;
    }
    var tr_str = "<tr class='TableText'>" +
    "<td style='color:#333;font-size:0.8em;'>" + promotionname + "</td>" +
    "<td  style='color:#333;font-size:0.8em;'>" + deviceid + " " + screenlocation + "</td>" +
    "<td align='center'  style='color:#333;font-size:0.8em;'>" + orientation + "</td>" +
    "<td  style='color:#333;font-size:0.8em;'>" + promotionimage + "</td>" +
    "<td  align='center'  style='color:#333;font-size:0.8em;'>" + mediatype + "</td>" +
    "<td  style='color:#333;font-size:0.8em;'>" + fromdate + "</td>" +
    "<td  style='color:#333;font-size:0.8em;'>" + todate + "</td>"
    if( (new Date(startdate).getTime() > new Date(nowdate).getTime()))      {
        tr_str += "<td align='center' style='color:#333;font-size:0.8em;' class='Active'>Active</td>";
            } else {
        tr_str += "<td align='center' style='color:#333;font-size:0.8em;' class='Scheduled'>Scheduled</td>";
    }
    tr_str += "<td align='center'  style='color:#333;font-size:0.8em;'><input type='button' name='edit' value='Edit' id=" + (i+1) + " class='btn btn-info btn-xs btn-block edit_data'></td>" +
    "</tr>";
    $("#userTable tbody").append(tr_str);
    }
    }
    });
});

Большое спасибо заранее за вашу помощь и время.

Answer 1

Это потому, что вы добавляете контент без удаления предыдущего , массаж "без данных" - это строка, поэтому вы должны очистить его перед циклом for:

success: function(response){
        var len = response.length;
        $("#userTable tbody").html("");
        for(var i=0; i<len; i++){
            var recordid = response[i].RecordID;
            var deviceid = response[i].DeviceID;

...

Во-первых, это не лучший способ вставить данные в таблицы данных.