如何在數據表的工具提示中顯示對象

Question

我使用來自 ajax 響應的數據動態創建一個表
我想在錨定到單元格的工具提示中顯示存儲在對象中的數據。
目前，我設法顯示了我的表格，但這個表格顯示的是“[object Object]”。
我想要做的是在這個對象的元素 0 中顯示並在工具提示中顯示其余部分。

使用 jsfiddle 運行

這是我的數據源

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" } }

表格渲染顯示功能

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

目前渲染是這個

我希望它在這里

不知道自己制作的代碼是不是最適合做我的表格的，謝謝大家的幫助。

謝謝

Answer 1

我發現，我添加了一個函數來讀取對象，然后我將數據注入到行的構造中。 結果在 Jsfiddle