[英]DataTables javascript library and nested JSON
I am looking to present some data in an interactive table on a web page, using the DataTables javascript library. 我希望使用DataTables javascript库在网页上的交互式表格中显示一些数据。 The example I am interested in looks like this .
我感兴趣的示例如下所示 。 This table is great because child rows showing extra(detailed) information can be shown and then hidden.
该表很棒,因为可以显示然后隐藏显示额外(详细)信息的子行。 The JSON data I am trying to display looks like this
我尝试显示的JSON数据如下所示
{
"data": [
{
"student_name": "jack",
"subjects": {
"math": {
"cat1_grade": "30",
"cat2_grade": "39",
"cat3_grade": "38"
},
"english": {
"cat1_grade": "30",
"cat2_grade": "39",
"cat3_grade": "38"
},
"swahili": {
"cat1_grade": "30",
"cat2_grade": "39",
"cat3_grade": "38"
}
},
"subject1_average": "35",
"subject2_average": "26",
"subject3_average": "59"
}
]
}
I want my table to have columns for student name,subject1 average,subject2 average and subject3 average. 我希望我的表中包含学生姓名,平均1科目2,平均2科目和3科目平均的列。 When a row is expanded it should have under the student name their scores for each one of the cat(continuous assesment tests) for each subject area.
当一行被扩展时,它应该在学生名下为每个学科领域的每只猫(连续评估测试)提供分数。
Currently I am not sure how to deal with the nested data. 目前,我不确定如何处理嵌套数据。 In the example the format(d) function displays more data, but the data is pretty straight forward.
在示例中, format(d)函数显示更多数据,但是数据非常简单。
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'+d.name+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+d.extn+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
}
My question is how do I get the javascript to decode each of the items in the subjects 'field' and display them in the table when expanded. 我的问题是如何获取JavaScript来解码主题 “字段”中的每个项目,并在展开时将其显示在表格中。 I am not really familiar with javascript or JSON really.
我不是真的很熟悉javascript或JSON。 I am more familiar with Python on desktops.
我更熟悉台式机上的Python。 I am not even sure if this is the best library.
我什至不确定这是否是最好的图书馆。
If there's something that works well with python, do share though I suspect that when it comes to displaying data on a web page, javascript is king 如果有一些可以很好地与python一起使用的东西,请共享,尽管我怀疑在网页上显示数据时,javascript是最重要的
Interesting one this. 有趣的一个。 Basically it's a question of iterating over the object/objects using
$.each
. 基本上,这是一个使用
$.each
遍历一个或多个对象的$.each
。 A working example here ( http://jsfiddle.net/annoyingmouse/mqrckaft/ ) though I'm not 100% sure I like the format of your data. 此处的一个有效示例( http://jsfiddle.net/annoyingmouse/mqrckaft/ )尽管我不确定100%是否喜欢您的数据格式。 It might be possible to work out the average on the render of each row rather than doing it server-side as I'm guessing you are?
也许可以计算出每一行渲染的平均值,而不是像我猜的那样在服务器端进行计算? Also, the link between child rows seems nebulous, there is no allowance for missed values etc.
此外,子行之间的链接似乎模糊,没有遗漏值等的余地。
After have a response from the called ajax, you can try the following: 收到来自ajax的响应后,可以尝试以下操作:
resp.success(function (data) {
json = JSON.parse(data.d);
if (json.Table != 0) {
$('#tablaReportes').DataTable({
"destroy": true,
"searching": false,
"ordering": false,
"lengthChange": false,
"pageLength": 1,
//----------------------------------------------------
data: json.Table,
columns: [
{'data': 'C019fechaRegistro'},
{'data': 'C019alertaIn'},
{'data': 'C019accionIn'},
{'data': 'C019NomUsuario'},
{'defaultContent': "<button type='button' class='btn btn-warning' onclick='grafica()'> <span class='fa fa-line-chart'></span></button> "
+ "<button type='button' class='btn btn-primary' onclick='verObservacion()'> <span class='fa fa-comments-o'></span></button>"
}
//{
//// 'render': function () {
//// return '<button type="button" onclick="grafica()" id="ButtonEditar" class="btn btn-warning"><span class="fa fa-line-chart"></span></button> ' +
//// '<button type="button" class="btn btn-primary" onclick="verObservacion()"><i class="fa fa-comments-o"></i></button>';
// //}
//}
],
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.