[英]Populate datatable using ajax call
我正在尝试使用 ajax 调用填充数据表。 但它只用columns
最后一个值填充第一columns
。
这是我的代码:
$(document).ready(function() {
$.ajax({
url: "http://192.168.2.32:5000/get_all_locations",
'method': 'GET',
'contentType': 'application/json'
}).done(function(data) {
console.log('dataaa', data);
$('#myTable').dataTable({
'aaData': data['data'],
"columns": [{
"data": "id",
"data": "name",
"data": "code"
}]
})
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="table table-bordered table-striped">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>Code</th>
</tr>
</thead>
</table>
在上图中,id 字段显示代码的值。 我该如何解决这个问题?
数据输出
{…}
StatusCode: true
StatusDescription: "Location details has been pulled successfully."
data: (9) […]
0: Object { code: "1007", id: 20, is_free_zone: true, … }
1: Object { code: "1002", id: 15, is_free_zone: false, … }
2: Object { code: "1001", id: 14, is_free_zone: false, … }
3: Object { code: "1003", id: 16, is_free_zone: false, … }
4: Object { code: "1004", id: 17, is_free_zone: false, … }
5: Object { code: "1006", id: 19, is_free_zone: false, … }
6: Object { code: "1005", id: 18, is_free_zone: false, … }
7: Object { code: "1008", id: 21, is_free_zone: false, … }
8: Object { code: "1009", id: 22, is_free_zone: false, … }
length: 9
见https://datatables.net/examples/ajax/objects.html
每列都应该是一个单独的对象,其数据属性指向记录上的属性名称。
columns: [
{"data": "id"},
{"data": "name"},
{"data": "code"}
]
您的列 def 是一个对象,而不是一个对象数组。
每个列配置都需要一个data
字段和一个可选的title
。
let data = requestData(); $(() => { $("#myTable").DataTable({ aaData: data['data'], columns: [ { "data" : "id" , "title": "ID" }, { "data" : "name" , "title": "Name" }, { "data" : "code" , "title": "Code" } ] }) }); function requestData() { return { data : [ { code: "1007", id: 20, name: "a", is_free_zone: true }, { code: "1002", id: 15, name: "b", is_free_zone: false }, { code: "1001", id: 14, name: "c", is_free_zone: false }, { code: "1003", id: 16, name: "d", is_free_zone: false }, { code: "1004", id: 17, name: "e", is_free_zone: false }, { code: "1006", id: 19, name: "f", is_free_zone: false }, { code: "1005", id: 18, name: "g", is_free_zone: false }, { code: "1008", id: 21, name: "h", is_free_zone: false }, { code: "1009", id: 22, name: "i", is_free_zone: false } ] }; }
#myTable th, #myTable td { padding: 0.33em } #myTable th { font-size: 0.90em } #myTable td { font-size: 0.75em }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet"/> <link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script> <div class="table-wrapper"> <!-- https://datatables.net/examples/styling/bootstrap4 --> <table id="myTable" class="table table-bordered table-striped"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Code</th> </tr> </thead> <tbody> </tbody> </table> </div>
更改您的代码如下
$(document).ready(function () {
$.ajax({
url: "http://192.168.2.32:5000/get_all_locations",
'method': 'GET',
'contentType': 'application/json'
}).done(function (data) {
console.log('dataaa', data);
$('#myTable').dataTable({
'aaData': data['data'],
"columns": [
{ "data": "id", },
{ "data": "name", },
{"data": "code",},
}]
})
})
您可以通过添加过滤或启用搜索来自定义每一列:
{"data": "code","orderable": false, "searchable": false,},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.