有没有什么简单的方法可以使用Ajax json响应来附加dataTables数据

Question

我的json响应采用以下格式。

[{
"directory": "random_code",
"name": "random_code1",
"mailing_name": "random_code",
"address": "random_code",
"statutory": "random_code",
"state": "random_code",
"pincode": "random_code",
"telephone_num": "random_code",
"email": "random_code",
"currency_symbol": "h",
"maintain": "random_code",
"financial_year": "random_code1",
"books_beginning": "random_code1",
"educational_mode": "hj",
"vault_password": "hj",
"security_control": "h",
"curreny_formal_name": "jh",
"num_decimal_places": "jh",
"symbol_suffixed": "j",
"currency_symbol_decimal": "h",
"amount_in_millions": "jhj",
"space_between_symbol_amount": "h",
"decimal_places_for_printing_amount_in_words": "jhj"
}, {
"directory": "random_code",
"name": "random_code2",
"mailing_name": "random_code",
"address": "jh",
"statutory": "jh",
"state": "jhjhjh",
"pincode": "jh",
"telephone_num": "jh",
"email": "jhj",
"currency_symbol": "hj",
"maintain": "hj",
"financial_year": "random_code2",
"books_beginning": "random_code2",
"educational_mode": "h",
"vault_password": "hj",
"security_control": "hj",
"curreny_formal_name": "jh",
"num_decimal_places": "jhj",
"symbol_suffixed": "hjh",
"currency_symbol_decimal": "jh",
"amount_in_millions": "jh",
"space_between_symbol_amount": "jh",
"decimal_places_for_printing_amount_in_words": "jhh"
}]

我在script标记中的代码如下，id名称为datatable2，并希望tp dsplay从ajax到Datatable的所有响应数据。使用以下代码，我可以看到表中的值，但它不在DataTables中。

<table id="datatable2" class="table order-column hover">
<thead>
<tr>
<th>Name</th>
<th>Financial Year</th>
<th>Book Beginning from</th>
<th width="150px">Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
$(function() {
$(document).ready(function() {
$.ajax({
url: "http://127.0.0.1:8000/api/company/",
dataType: "json",
type: 'GET',
success: function(data) {
var trHTML = '';
$.each(data, function(i, item) {
trHTML += '<tr><td>' + item.name + '</td><td>' + item.financial_year + '</td><td>' + item.books_beginning + '</td><td><a href="/company_app/edit/1/" class="btn ink-reaction btn-floating-action btn-warning"><i class="md md-edit"></i> </a><a href="/order/delete/1/" class="btn ink-reaction btn-floating-action btn-danger" onclick="return confirm('Are you sure you want to delete this?')"><i class="md md-delete"></i> </a><a href="/order/1/" class="btn ink-reaction btn-floating-action btn-primary"><i class="md md-print"></i> </a></td></tr>';
});
$('#datatable2').append(trHTML);
}
});
});
});
</script>

但它并没有添加到dataTable中。有人能帮我在数据表中添加相同的内容吗？我对数据表一无所知。

HTML已编辑。

Answer 1

初始化数据表时，可以在内置ajax参数中使用ajax调用，并将数据发送到数据表的回调方法：

$('#datatable2').dataTable({
"ajax": function (data, callback, settings) {
$.ajax({
url: "http://127.0.0.1:8000/api/company/",
dataType: "json",
type: 'GET',
success: function(data) {
callback(data);
}
});
},
"columns": columns
});

此外，如果你想自定义你的行，这也应该在"；列"；参数，例如：

columns = [
{ "data": "item" },
{ "data": "financial_year" },
{ "data": "books_beginning" },
{ "data": null,
"render": function (data, type, row, meta) {
// you can even get the data from other columns here
// and render whatever you want on these cells
return '</td><td><a href="/company_app/edit/1/" class=...'
}
}
]

数据表文档中有很多示例，具有不同的定制级别：

https://datatables.net/reference/option/ajax

https://datatables.net/reference/option/columns.render