当我从数据库获取数据时,我正在尝试将此数据保存到DataTable . 但是当我这样做时,DataTable的第一行显示'No data available in table' . 这是因为在ajax表单工作之前,datatable.js文件可以工作 . (因为花了很长时间来处理ajax表单) . 即系统无法以这种方式读取DataTable中的任何数据 . 然后当ajax表单运行时,我的数据保存在数据表中,但第一行显示'no data available in table' . 数据功能失常 . 所以我无法按下更新和删除按钮 . 像这样:
和我的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代码需要花费大量时间才能工作) . 我该如何解决?
1 回答
以下是动态创建元素的事件委派示例 .
有关详细信息,请参阅jQuery .on() .
如您所见,此示例onclick事件绑定到已创建的元素和尚未添加到表中的元素 .
单击表格单元格以触发此事件 .