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;

...

有一件事，这不是在数据表中插入数据的最佳方法。

jQuery DataTables显示“表中没有可用数据”，并显示数据

1 个答案: