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. The example I am interested in looks like this. This table is grea

Solution 1:

Interesting one this. Basically it's a question of iterating over the object/objects using $.each. A working example here (http://jsfiddle.net/annoyingmouse/mqrckaft/) though I'm not 100% sure I like the format of your data. 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.

Solution 2:

After have a response from the called ajax, you can try the following:

 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>';//    //}//}

                ],

        });
    });