[英]Unable to Update Body of DataTable using an Ajax call
我有一個DataTable,我試圖通過和ajax調用加載數據,但第一行數據總是說:
但在它下面包含了加載的ajax數據。 如何刪除No數據行並將ajax數據加載到該位置?
代碼如下:
<div class="box-body">
<table id="changeTicketsTable" class="table table-bordered table-striped">
<thead>
<tr>
<th>Ticket Number</th>
<th>Description</th>
<th>Risk</th>
<th>Primary CI</th>
<th>State</th>
<th>Planned Start Date</th>
<th>Actual Start Date</th>
<th>Actual End Date</th>
<th>Affected Partners</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Ticket Number</th>
<th>Description</th>
<th>Risk</th>
<th>Primary CI</th>
<th>State</th>
<th>Planned Start Date</th>
<th>Actual Start Date</th>
<th>Actual End Date</th>
<th>Affected Partners</th>
</tr>
</tfoot>
</table>
</div>
DataTable的實現:
<script>
getChangeTicketInformation();
$('#changeTicketsTable').DataTable({
"pageLength": 5,
'paging' : true,
'lengthChange': true,
'searching' : false,
'ordering' : true,
'info' : true,
'autoWidth' : false
});
})
</script>
用於進行Ajax調用的Javascript:
function getChangeTicketInformation(){
$.ajax({
type: "GET",
url: "../../get_change_ticket_info",
success: function(data) {
$.each(data, function (i, item) {
$('#changeTicketsTable').find('tbody').append(
'<tr>' +
'<td>' + item.number + '</td>' +
'<td>' + item.short_description + '</td>' +
'<td>' + item.risk + '</td>' +
'<td>' + item.cmdb_ci_display_value + '</td>' +
'<td>' + item.state + '</td>' +
'<td>' + item.start_date + '</td>' +
'<td>' + item.work_start + '</td>' +
'<td>' + item.work_end + '</td>' +
'<td>' + 'FILL IN' + '</td>'
+ '</tr>');
});
}
});
}
在Chrome中打開開發人員工具,然后在頁面中輸入jquery(也在下面),看看會發生什么。 然后檢查html並查看它是否按預期更新 - 它可能在那里,但可能是隱藏的。
但更好的方法實際上是使用DataTable內置的ajax功能: https : //datatables.net/examples/ajax/simple.html
$('#changeTicketsTable').find('tbody').append(
'<tr>' +
'<td>' + item.number + '</td>' +
'<td>' + item.short_description + '</td>' +
'<td>' + item.risk + '</td>' +
'<td>' + item.cmdb_ci_display_value + '</td>' +
'<td>' + item.state + '</td>' +
'<td>' + item.start_date + '</td>' +
'<td>' + item.work_start + '</td>' +
'<td>' + item.work_end + '</td>' +
'<td>' + 'FILL IN' + '</td>'
+ '</tr>');
});
使用DataTable,您可以使用以下API添加新行:
row.add() :向表中添加一個新行。
function getChangeTicketInformation() { var data = [{number: 1, short_description: '1', risk: 1, cmdb_ci_display_value: 1, state: '1', start_date: '1', work_start: '1', work_end: '1'}, {number: 2, short_description: '2', risk: 2, cmdb_ci_display_value: 2, state: '2', start_date: '2', work_start: '2', work_end: '2'}, {number: 3, short_description: '3', risk: 3, cmdb_ci_display_value: 3, state: '3', start_date: '3', work_start: '3', work_end: '3'}]; //$.ajax({ //type: "GET", //url: "../../get_change_ticket_info", //success: function (data) { var dti = $('#changeTicketsTable').DataTable(); $.each(data, function (i, item) { dti.row.add([ item.number, item.short_description, item.risk, item.cmdb_ci_display_value, item.state, item.start_date, item.work_start, item.work_end, 'FILL IN' ]).draw(false); }); //} //}); } $('#changeTicketsTable').DataTable({ "pageLength": 5, 'paging': true, 'lengthChange': true, 'searching': false, 'ordering': true, 'info': true, 'autoWidth': false }) getChangeTicketInformation();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <div class="box-body"> <table id="changeTicketsTable" class="table table-bordered table-striped"> <thead> <tr> <th>Ticket Number</th> <th>Description</th> <th>Risk</th> <th>Primary CI</th> <th>State</th> <th>Planned Start Date</th> <th>Actual Start Date</th> <th>Actual End Date</th> <th>Affected Partners</th> </tr> </thead> <tbody> </tbody> <tfoot> <tr> <th>Ticket Number</th> <th>Description</th> <th>Risk</th> <th>Primary CI</th> <th>State</th> <th>Planned Start Date</th> <th>Actual Start Date</th> <th>Actual End Date</th> <th>Affected Partners</th> </tr> </tfoot> </table> </div>
我可以給你一個簡單的例子來說明你的ajax url中<tbody id='table_tbody_id'></tbody>
數組響應,並將它們設置為以下make <tbody id='table_tbody_id'></tbody>
和
試試這個吧
function getChangeTicketInformation() {
$.ajax({
type: "GET",
url: "../../get_change_ticket_info",
success: function (data) {
for (let i in data) {
let item = data[i];
let number = item[0];
let short_description = item[1];
let risk = item[2];
let cmdb_ci_display_value = item[3];
let state = item[4];
let start_date = item[5];
let work_start = item[6];
let work_end = item[7];
let tableRow = "<tr>\n" +
" <td> " + number + "</td>\n" +
" <td> " + short_description + "</td>\n" +
" <td> " + risk + "</td>\n" +
" <td> " + cmdb_ci_display_value + "</td>\n" +
" <td> " + state + "</td>\n" +
" <td> " + start_date + "</td>\n" +
" <td> " + work_start + "</td>\n" +
" <td> " + work_end + "</td>\n" +
" <td> " + 'FILL IN' + "</td>\n" +
" </tr>";
$('#table_tbody_id').append(tableRow);
}
}
});
}
和通話方法
getChangeTicketInformation();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.