我想用一个AJax请求填充一个表（DataTables
我的请求ajax返回Json，但不可能填满表，我有以下错误:
DataTables警告:table ID=DT-Table-为第1行第0列请求未知参数“0”。有关此错误的详细信息，请参阅http://datatables.net/TN/4
我的桌子:
<div>
<div class="table-responsive">
<table id="dt-table" class="table table-striped table-bordered">
<thead>
<tr>
<th>Invoice</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
我的JS:
var table = $('#dt-table').DataTable({});
$(document).on("click", ".button", function() {
var inputVal = $(this).text();
var selectVal = $('#select option:selected').val();
$.post("/ajax/invoice.php", {find: inputVal, column: selectVal}).done(function(data){
console.log(data)
table.rows.add(data).draw();
});
});
ajax响应:
[{"invoice":"AZERT"},{"invoice":"JFKDH"},{"invoice":"DKHFVEP"}]
我的请求:
$column = $_POST['column'];
$request = $bdd->prepare("SELECT invoice from table_master WHERE $column = :find");
$request->execute(array(
':find' => $_POST['find']
));
$result = $request->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($result);
我看不出问题出在哪里，我查看了DataTables文档，我的json的格式通常是正确的
https://datatables.net/reference/api/rows.add()
您需要将
var table = $('#dt-table').DataTable({"columns":[{ "data": "invoice"}]});
我不熟悉php，但是当我试图从一个模式弹出窗口更新行点击上的一些单元格时，我遇到了同样的问题。最后，我在post回调中设置了datatable属性。在重新创建表之前，我还必须销毁它。下面是我的LoadData函数回调:
.done(function (result) {
if (result.isError) {
window.location.href = result.newUrl;
}
else {
var html = '';
$('#searchTable').dataTable().fnDestroy();
$('#searchTableBody').empty();
if (result.TransactionDetails.lenght == 0) {
html += '<tr><td>No Records Found</td></tr>';
}
else {
$.each(result.TransactionDetails, function (i, item) {
html += '<tr><td id="hiddenIdentifier" >' + item.x + '</td><td>' + item.y + '</td><td>' + item.z + '</td><td style="width: 10%" >' + item.a + '</td><td style="width: 30%">' + item.b + '</td><td>' + item.c + '</td><td style="width: 50%">' + item.d + '</td><td style="width: 80%"><input type="button" data-toggle="modal" data-target="#detailsModal" class="table-btn" id="btnViewDetails" value="View Details" /><input type="button" id="btnEditAmt" data-toggle="modal" class="table-btn" data-target="#amtModal" value="Edit Amount" /></td></tr>';
});
}
$('#searchTableBody').append(html);
var table = $('#searchTable').DataTable({
searching: false,
paging: true,
columnDefs: [
{
"targets": [0],
"visible": false,
"searchable": false
},
{
"targets": [1],
"visible": true,
"searchable": true
},
{
"targets": [7],
"orderable": false
}
]
})
$('#searchTable').show();
$('#loaderLoadData').fadeOut();
}
})
它只通过Api调用工作。fnDestroy()是关键。在重新创建它之前一定要销毁它。还要注意，我在done函数内部设置了DataTable属性。
