如何循环处理datatable中的数组
如何循环处理datatable中的数组
提问于 2018-03-07 07:22:26
我试图用javascript呈现一个表，如下所示：
$('#serviceTable').DataTable({
responsive: true,
aaData: services,
bJQueryUI: true,
aoColumns: [
{ mData: 'service_name' },
{ mData: 'last_incident' },
{ mData: 'integration' }
]
});现在，integration字段基本上是json对象的数组，如下所示
[{"name":"abc","key":"123"},{"name":"xyz","key":"1234"}]以下是表的定义：
<table id="serviceTable" class="table table-bordered table-striped">
<thead>
<tr>
<th data-field="service_name" data-formatter="LinkFormatter">Service</th>
<th data-field="last_incident">Last Incident</th>
<th data-field="integration">Integration</th>
</tr>
</thead>
</table>因此，在UI中，我可以在列集成中看到[object Object],[object Object]。如何在json数组上循环以在列中显示name字段
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-03-07 07:38:19
基本上，您需要再次使用render选项。
var service=[
{
"service_id" :"1",
"service_name":"Service 1",
"last_incident":"l_i1",
"integration": [{"name":"abc","key":"123"},
{"name":"xyz","key":"1234"}]
},
{
"service_id" :"2",
"service_name":"Service 2",
"last_incident":"l_i2",
"integration": [{"name":"abc","key":"123"},
{"name":"xyz","key":"1234"}]
}
];
$('#serviceTable').DataTable({
responsive: true,
aaData: service,
bJQueryUI: true,
aoColumns: [
{
mData: 'service_name' ,
"render": function(value, type, row){
return '<a href="/service/'+row.service_id+'">'+value+'</a>';
}
},
{ mData: 'last_incident' },
{ mData: 'integration',
render: function (value, type, row) {
var val = [];
$.each(value, function(i, v){
val.push(v['name']);
})
return val;
}
}
]
});Stack Overflow用户
发布于 2018-03-07 07:35:47
使用render如下所示。
{ mData: 'integration',
"render": function(value, type, row, meta){
var output="";
for(var i=0;i<value.length;i++){
output += value[i].name ;
if(i< value.length-1){
output +=", ";
}
}
return output;
}工作示例:
<head>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="serviceTable" class="table table-bordered table-striped">
<thead>
<tr>
<th data-field="service_name" data-formatter="LinkFormatter">Service</th>
<th data-field="last_incident">Last Incident</th>
<th data-field="integration">Integration</th>
</tr>
</thead>
</table>
</body>
<script>
var service=[{"service_id" :"1", "service_name":"s1","last_incident":"i1","integration":[{"name":"abc","key":"123"},{"name":"xyz","key":"1234"}]}
,{"service_id" :"2", "service_name":"s2","last_incident":"i1","integration":[{"name":"abc","key":"123"},{"name":"xyz","key":"1234"}]}
];
$('#serviceTable').DataTable({
responsive: true,
aaData: service,
bJQueryUI: true,
aoColumns: [
{
mData: 'service_name' ,
"render": function(value, type, row, meta){
return "<a href='/service/"+row.service_id+"'>"+value+"</a>";
}
},
{ mData: 'last_incident' },
{ mData: 'integration',
"render": function(value, type, row, meta){
var output="";
for(var i=0;i<value.length;i++){
output += value[i].name ;
if(i< value.length-1){
output +=", ";
}
}
return output;
}
}
]
});
</script>
Stack Overflow用户
发布于 2018-03-07 07:31:53
您必须在javascript中创建表，如下所示
var rows = [{"name":"abc","key":"123"},{"name":"xyz","key":"1234"}]
var html = "<table border='1|1'>";
for (var i = 0; i < rows.length; i++) {
html+="<tr>";
html+="<td>"+rows[i].name+"</td>";
html+="<td>"+rows[i].key+"</td>";
html+="</tr>";
}
html+="</table>";
$("div").html(html);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49146266
复制相关文章
相似问题
腾讯云开发者
