dynamic Json populate to Datatable on the fly

suwarjono@daunbiru.com

Hi support,

I try to create dynamic table using dataTable like discussion in here https://datatables.net/forums/discussion/29260/dynamic-column-headers-via-ajax.

but my Json return was an object and array.

here my json Look like

{
"data":[
{"tg":"2016-03-25","ves":"Attaka 0","datax":[0,0,0,0,0]},
{"tg":"2016-03-26","ves":"Attaka 0","datax":[0,0,0,0,0]},
{"tg":"2016-03-27","ves":"Attaka 0","datax":[0,0,0,0,0]},
{"tg":"2016-03-28","ves":"Attaka 0","datax":[460.512,332.244,0,207.244,0]},
{"tg":"2016-03-29","ves":"Attaka 0","datax":[0,0,0,0,0]},{"tg":"2016-03-30","ves":"Attaka 0","datax":[311.123,0,311.123,245.381,362.373]},
{"tg":"2016-03-31","ves":"Attaka 0","datax":[0,0,0,0,0]},
{"tg":"2016-04-01","ves":"Attaka 0","datax":[0,0,0,0,0]}],"columns":["Date","Vessel","Mermaid Nusantara","Bayu Laut","N: Pumping Unit","Falcon Force","N: CTU"]
}

and my jqeury was

$("#report1").click(function (e) {
       $.ajax({
            
            "url": "api/report/",
            "success": function (json) {
                
                var tableHeaders;
                $.each(json.columns, function (i, val) {
                    //console.log(val);
                    tableHeaders += "<th>" + val + "</th>";
                });

                $("#reportUnitTable").empty();
                $("#reportUnitTable").append('<table id="rUnit" class="table display table-bordered" style="width:100%" ><thead><tr>' + tableHeaders + '</tr></thead></table>');
               
                var d = $('#rUnit').dataTable();

                $.each(json.data, function(i,val){
                    console.log(val.tg);
                    //d.column.data(val.tg);
                    d.columns({ data: val.tg });
                    //d.columns().data(val.ves);
                    for (var k = 0; k < val.datax.length; k++) {
                        console.log(val.datax[k]);
                        //d.columns().data(val.datax[k]);
                    }
                });

              
            },
            "dataType": "json"
        });

My Queston was, How can i populate my JSON into table datatable using datatable api column data?? please help...

Thanks before.

allan

You can't modify columns after initialisation I'm afraid. You need to set them up using columns. See this FAQ.

Allan

suwarjono@daunbiru.com

hi allan,

may be your suggest was right. but i have some difficulties to implement column set reference. hopely any examples which can i adopt.

one more, is it possible to create iteration in datables to set each column and each data?

thank before for your support.

allan

one more, is it possible to create iteration in datables to set each column and each data?

I'm afraid I don't understand your question.

As for how to implement it, you would simply use:

$('#myTable').DataTable( {
  columns: json.columns,
  data: json.data
} );

Allan

suwarjono@daunbiru.com

Hi Allan,

you're right, i've done using setup using your suggest.
$('#myTable').DataTable( {
columns: json.columns,
data: json.data
} );

thanks alot