Question

当我从数据库获取数据时，我正在尝试将此数据保存到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代码需要大量时间才能工作）。我该如何解决？

Answer 1

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

有关详细信息，请参阅jQuery .on()。

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

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

＆＃13;

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

＆＃13;

#dataTable {
width: 100%;
}

#dataTable thead {
text-align: left;
}

#dataTable tbody tr td {
cursor: pointer;
}

＆＃13;

<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 -->

＆＃13;

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

1 个答案: