dynamic Json populate to Datatable on the fly
dynamic Json populate to Datatable on the fly
suwarjono@daunbiru.com
Posts: 10Questions: 2Answers: 0
in General
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.
This discussion has been closed.
Answers
You can't modify columns after initialisation I'm afraid. You need to set them up using
columns. See this FAQ.Allan
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.
I'm afraid I don't understand your question.
As for how to implement it, you would simply use:
Allan
Hi Allan,
you're right, i've done using setup using your suggest.
$('#myTable').DataTable( {
columns: json.columns,
data: json.data
} );
thanks alot