我创建了一个 json 数组,用于填充数据表。在此数组中,为标签名称定义了键,该名称必须放置在表格的 thead
内,并且内容必须放置在 tbody
内。
我的 json 数组如下所示:
{
"Content": [{
"labelname1": "some content",
"labelname2": "some content",
"labelname3": "some content",
"labelname4": "some content",
}, {
"labelname1": "some content",
"labelname2": "some content",
"labelname3": "some content",
"labelname4": "some content",
}]
}
如何使用 DataTable 库将此数组转换为如下表?
<table id="example" class="display">
<thead>
<tr>
<th>labelname1</th>
<th>labelname2</th>
<th>labelname3</th>
<th>labelname4</th>
</tr>
</thead>
<tbody>
<tr>
<td>some content</td>
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
<tr>
<td>some content</td>
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
</tbody>
</table>
我尝试按如下方式执行此操作,但出现以下错误:未捕获类型错误:无法使用“in”运算符在 naam 中搜索“3”
。
// map the json array to an array with only values
var content = $.map(jsonArray, function(value, index) {
return [$.map(value, function(val, pos) { return [val] })];
});
// map the json array to an array with unique keys
var labels = $.unique($.map(jsonArray, function(value, index) {
// map all keys
return $.map(value, function (val, pos) {return [pos]});
}));
$('table').DataTable({ "columns": labels,"data": content});
最佳答案
您可以通过以下方式进行:
- 使用 columns.title
- 使用 columnDefs
使用 columns.title
$(document).ready(function() {
// data that you want to show in the table,
// you can get this data from the server also
var json_data = {
"Content": [{
"labelname1": "some content",
"labelname2": "some content",
"labelname3": "some content",
"labelname4": "some content",
},
{
"labelname1": "some content",
"labelname2": "some content",
"labelname3": "some content",
"labelname4": "some content",
}
]
},
columns_title = [];
/*
Get the first element of the Content array and iterate over it to get all the
keys and push object having data and title into the columns_title
*/
$.each(json_data.Content[0], function(key) {
columns_title.push({
"data": key,
"title": key
});
});
$('#table').dataTable({
"data": json_data.Content,
"columns": columns_title
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<table id="table">
</table>
使用 columnDefs
$(document).ready(function() {
// data that you want to show in table,
// you can get this data from server also
var json_data = {
"Content": [{
"labelname1": "some content",
"labelname2": "some content",
"labelname3": "some content",
"labelname4": "some content",
},
{
"labelname1": "some content",
"labelname2": "some content",
"labelname3": "some content",
"labelname4": "some content",
}
]
},
column_defs = [],
count = 0;
/*
columnDefs requires a targets property to be set in each definition
object (columnDefs.targets). This targets property tells DataTables which
column(s) the definition should be applied to.
It can be:
* 0 or a positive integer - column index counting from the left
* A negative integer - column index counting from the right
* A string - class name will be matched on the TH for the column
* The string _all - all columns (i.e. assign a default)
*/
$.each(json_data.Content[0], function(key) {
column_defs.push({
"targets": count++,
"title": key
});
});
// initializing datatable
$('#table').dataTable({
"data": json_data.Content,
"columnDefs": column_defs,
"columns": [{
"data": "labelname1"
},
{
"data": "labelname2"
},
{
"data": "labelname3"
},
{
"data": "labelname4"
}
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<table id="table">
</table>
关于jquery - 从 DataTable 内的 json 数组填充表头标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45920959/