I create a table dynamically with data coming from an ajax response
I want to display data stored in an object in a tooltip anchored to the cell.
For the moment I manage to display my table but this one displays `[object Object]`.
What I want to do is display in element 0 of this object and display the rest in the tooltip.
Here is my datasource
var response= {
"service1": {
"APH7": "1.1.5",
"USE1": "1.1.5",
"EUW1": "1.1.5",
"APK2": {
"CSTG": "1.0.10",
"CSTH": null,
"0": "1.0.10"
},
"APT2": {
"CSTG": "1.1.5",
"CSTH": null,
"0": "1.1.5"
},
"INDW2": {
"CSTG": "1.1.5",
"CSTH": null,
"0": "1.1.5"
},
"USW1": {
"CSTG": "1.1.5",
"CSTH": null,
"0": "1.1.5"
},
"USW2": {
"CSTG": "1.1.5",
"CSTH": null,
"0": "1.1.5"
},
"AP2": {
"CSTG": "1.1.5",
"CSTH": null,
"0": "1.1.5"
},
"APS2": {
"CSTG": "1.1.5",
"CSTH": null,
"0": "1.1.5"
},
"0": "CD"
},
"service2": {
"APH7": 1,
"EUW1": 1,
"USE1": 1,
"APS2": {
"CSTG": 1,
"CSTH": null,
"0": 1
},
"USW2": {
"CSTG": 1,
"CSTH": null,
"0": 1
},
"USW1": {
"prd": "1",
"CSTH200722": null,
"0": 1
},
"APK2": {
"CSTG": 1,
"CSTH": null,
"0": 1
},
"APT2": {
"CSTG": 1,
"CSTH": null,
"0": 1
},
"AP2": {
"CSTG": 1,
"CSTH": null,
"0": 1
},
"INDW2": {
"CSTG": 1,
"CSTH": null,
"0": 1
},
"0": "BSF"
}
}
Table rendering display function
function rendertable(data){
//data from webservice
var dataSet = data;
//create table
var table = $("#deploymentMap_table").DataTable({
data: constructRaws(dataSet),//tbody
paging: false,
searching: false,
info: false,
responsive: false,
dom: 't', //display only the table
order: [[ 0, 'asc' ]],//order by 'service' col
columnDefs:[
{
targets:'_all',
render:function(data){
if(data == null) {return ""
} else {return data;}
}
},
// hide type column
{ targets: 1, "visible": false},
{ targets: 0, "width" : "200px"},
],
columns: constructColumns(dataSet),//thead
// attribute classname (background color) for services
rowCallback: function(row, data, index){
if(data[0] != "CD"){$(row).find('td:eq(0)').css('background-color', '#2f6fa6').css('color', '#fff');
}
else{
$(row).find('td:eq(0)').css('background-color', '#ff961f').css('color', '#fff');
}
},
// generate tooltip and td style
createdRow: function( row, data, dataIndex) {
$.each(row.childNodes, function(i,value){
if(value.innerHTML == 1){
value.innerHTML = "BSF"
}
else if(value.innerHTML == 2){
value.innerHTML = "PATH1"
}
if( i != 0){
if(value.innerHTML){
$(value).addClass('td_color');
$(value).attr('data-toggle', 'tooltip').attr('title', '<div align="left">Service : '+data['service']+'<br>version : '+value.innerHTML+'<br>Type :'+data[0]+'</di>');
}
}
})
},
});
function constructRaws(data) {
var raws = [];
$.each(data, function(i, value) {
// This code is used to display item 0 of the object
// If I do this my object is destroyed,
// and becomes unusable to display it in the tooltip
//***********************************************
//$.each(value, function(ind, val){
// if (typeof val === "object"){
//value[ind] = val[0];
//}
//});
//
raws.push($.extend(value, {service: i}));
});
return raws;
}
function constructColumns(data) {
var regions = [];
//get all regions
$.each(data, function(i,service) {
$.each(service, function(region) {
regions.push(region);
});
});
regions = $.unique(regions.sort()) ;
var columns = [];
//set default columns
columns.push({data : 'service', title: 'Services'});
//set regions columns
$.each(regions, function(i,value) {
if(value != "service"){
columns.push({data: value, title: value });
}
});
return columns;
}
Currently the rendering is this one
And I would like it to be here
I don't know if the code I produced is the best one to make my table, thank you for your help.
Thanks
