DataTables javascript 库和嵌套 JSON答案

【问题标题】：DataTables javascript library and nested JSONDataTables javascript 库和嵌套 JSON
【发布时间】：2016-02-02 22:29:17
【问题描述】：

我希望使用 DataTables javascript 库在网页上的交互式表格中呈现一些数据。我感兴趣的例子看起来像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"
    }
  ]
}

我希望我的表格包含学生姓名、主题 1 平均水平、主题 2 平均水平和主题 3 平均水平的列。当一行被扩展时，它应该在学生姓名下显示他们在每个学科领域的每只猫的分数（连续评估测试）。

目前我不确定如何处理嵌套数据。在示例中，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>';
}

我的问题是如何让 javascript 解码 subjects“字段”中的每个项目并在展开时将它们显示在表格中。我真的不太熟悉 javascript 或 JSON。我更熟悉桌面上的 Python。我什至不确定这是否是最好的图书馆。

如果有什么与 python 配合得很好，请分享，尽管我怀疑在网页上显示数据时，javascript 是王道

【问题讨论】：

你的 JSON 格式不正确，你能用 this format 代替吗？

标签： javascript jquery json python-2.7 datatables

【解决方案1】：

这很有趣。基本上这是一个使用$.each 迭代对象/对象的问题。这里有一个工作示例（http://jsfiddle.net/annoyingmouse/mqrckaft/），尽管我不是 100% 确定我喜欢你的数据格式。有可能计算出每行渲染的平均值，而不是像我猜的那样在服务器端进行？此外，子行之间的联系似乎很模糊，不允许遗漏值等。

【讨论】：

谢谢，我看了一下工作示例，好东西，我在本地机器上试过了，但我无法获得任何数据。我怀疑在我的笔记本电脑上运行它时出现的问题与“ajax”有关：{“url”：'/echo/js/?js='+encodeURIComponent(JSON.stringify(data)),} 你好吗使数据来自本地数据部分，甚至是具有相同数据的本地文件？
嗨，encodeURIComponent 是一种让 JSFiddle 模拟 ajax 调用的方法，只需将其替换为您之前的任何内容即可。希望对您有所帮助。

【解决方案2】：

从被调用的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>&nbsp"
                        + "<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>&nbsp' +
                    ////        '<button type="button" class="btn btn-primary" onclick="verObservacion()"><i class="fa fa-comments-o"></i></button>';
                    //    //}
                    //}

                ],

        });
    });

【讨论】：