如何删除 DataTable 中的“数据中没有可用数据”？答案

【问题标题】：How can I remove the "No data available in data" in the DataTable?如何删除 DataTable 中的“数据中没有可用数据”？
【发布时间】：2018-08-28 17:53:56
【问题描述】：

当我有来自数据库的数据时，我正在尝试将此数据保存到 DataTable。但是当我这样做时，DataTable 的第一行显示“表中没有可用数据”。这是因为在 ajax 表单工作之前，datatable.js 文件可以工作。（因为 ajax 表单的工作需要很长时间）。即系统无法以这种方式读取DataTable中的任何数据。然后当ajax表单运行时，我的数据保存在数据表中，但第一行显示“表中没有可用数据”。数据功能失调。所以我不能按更新和删除按钮。像这样：

还有我的 Ajax 代码

var xGlobalTitle;
$.ajax({
    type: 'GET',
    url: '/Home/postInformationofConferenceTitle',
    dataType: "JSON",
    success: function (data) {    
            xGlobalTitle = data.xglobalTitle;    
    }
}).done(function(data){
    $.post("/Home/selectRooms", { xtitle: xGlobalTitle }, function (data) {

            var ndx = 0;
            $.each(data.xroom_name, function (key, value) {

                var Xroom_name = data.xroom_name[ndx];
                var Xroom_plan = data.xroom_plan[ndx];

                var body = '<tr>';
                    body += '<td>' +
                    '<div class="img-container">' +
                    '<img src="../../assets/img/room-plan/' + Xroom_plan + '" alt="..." id="imgsrc">' +
                    '</div>' +
                    '</td>' ;
                    body += '<td id="imgname">' + Xroom_name + '</td>' ;
                    body += '<td class="text-right">' +
                    '<a href="#" class="btn btn-simple btn-warning btn-icon edit" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>' +
                    '<a href="#" class="btn btn-simple btn-danger btn-icon remove" ><i class="fa fa-times"></i></a>' +
                    '</td>' ;
                    body += '</tr>';

                    $(body).appendTo($("tbody"));
                    $("#datatables").DataTable();
                ndx++;

            });


        });
});

主要是我在这里使用了嵌套的 ajax 形式，所以这段代码在 n^2 的时候工作。并且由于它在完成此代码运行之前运行 dataTable.js 脚本，因此第一行显示“表中没有可用数据”（因为此 ajax 代码需要大量时间才能工作）。我该如何解决？

【问题讨论】：

也许...在浏览器窗口上右键单击它。单击检查元素。看看它是否有一个ID。如果是，则在结果加载完成后$('#myID').empty();。
或者...$('#parentContainer').find('#targetContainer').empty();
这仅提供删除“表中没有可用数据”。但是更新和删除按钮仍然不起作用，因为系统无法读取 DataTable 中的任何数据。（因为这个 ajax 代码需要很长时间才能工作）
即这个ajax代码需要很长时间才能工作，所以脚本jquery.datatable.js首先工作。并且此表上的数据保存在 'NO DATA AVAILABLE IN TABLE' 之后

标签： javascript html ajax web datatable

【解决方案1】：

这是动态创建元素的事件委托示例。

更多详情请见jQuery .on()。

如您所见，此示例 onclick 事件绑定到已创建的元素和尚未添加到表中的元素。

单击表格单元格以触发此事件。

$( "#dataTable tbody tr td" ).on( "click", function() {
  console.log('Clicked target text: ' + $(this).text() );
});

#dataTable {
width: 100%;
}

#dataTable thead {
text-align: left;
}

#dataTable tbody tr td {
cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Begin table -->
<table id="dataTable" class="striped col s12">

<!-- Begin table head -->
<thead>
<tr>
<th>DATE</th>
<th>CLIENT</th>
<th>TYPE</th>

</tr>
</thead>
<!-- ./ End table head -->

<!-- Begin table body -->
<tbody>
<tr>
<td>2/21/18</td>
<td>CONNOR, SARAH</td>
<td>HOME</td>
</tr>

<tr>
<td>2/21/17</td>
<td>TRAVOLTA, JOHN</td>
<td>HOME</td>
</tr>

<tr>
<td>2/21/16</td>
<td>CRUISE, TOM</td>
<td>BUSINESS</td>
</tr>

</tbody>
<!-- ./ End table body -->

</table>
<!-- ./ End table -->

【讨论】：