Pivottable display html in table
I am trying to use https://github.com/nicolaskruchten/pivottable , basically I want to show an image in a table. What I have done so far; but it will not display the image as an img tag, instead it considers it to be a string
<body>
<script type="text/javascript">
$(function(){
$("#output").pivotUI(
[
{product: "product1", image: "<img src='image1' alt='' height='42' width='42'>"},
{product: "product2", image: "<img src='image2' alt='' height='42' width='42'>"}
]
);
});
</script>
<p><a href="http://nicolas.kruchten.com/pivottable/examples/index.html">« back to examples</a></p>
<div id="output" style="margin: 10px;"></div>
</body>
source to share
Since the table renderer does not support html values for th elements, it explicitly sets a property textContent
that you must create your own renderer. You have two options:
1.Create a renderer based on the table rendering code and change textContent
to innerHTML
. I will use a jsfiddle snippet as the render function is quite large: http://jsfiddle.net/u3pwa0tx/
2. Develop an existing table renderer that renders html as plain text, but move all text to html before returning it to the parent being added.
Edit . I created a pull request in the main repository https://github.com/nicolaskruchten/pivottable/pull/214
$(function(){
var rendererHtml = function(){
var result = pivotTableRenderer2.apply(this,arguments);
$(result).find('th').each(function(index,elem){
var $elem = $(elem);
$elem.html($elem.text());
})
return result;
}
$("#output").pivotUI(
[
{product: "product1", image: "<img src='image1' alt='' height='42' width='42'>"},
{product: "product2", image: "<img src='image2' alt='' height='42' width='42'>"}
],{
renderers:{
'table2Renderer': rendererHtml
}
}
);
});
source to share