I am trying to use , basically I want to show image in the table. What I've done so far is ; but it wont display the image as img tag instead it considers it as 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=".html">« back to examples</a></p>
<div id="output" style="margin: 10px;"></div>
</body>
I am trying to use https://github./nicolaskruchten/pivottable, basically I want to show image in the table. What I've done so far is ; but it wont display the image as img tag instead it considers it as 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./pivottable/examples/index.html">« back to examples</a></p>
<div id="output" style="margin: 10px;"></div>
</body>
- This is now a supported feature :) – nicolaskruchten Commented Jan 8, 2015 at 12:40
- I had to unfortunately remove support for this feature after all as it created an XSS security vulnerability. See github./nicolaskruchten/pivottable/pull/401 for details – nicolaskruchten Commented Dec 11, 2015 at 14:01
1 Answer
Reset to default 5Since the table renderer does not support html values for th elements, it sets explicitely the textContent property of th you must create your own renderer.
You have two choices:
1.Create a renderer based on Table renderer code and change textContent to innerHTML. I will use a jsfiddle snippet since the render function is pretty big: http://jsfiddle/u3pwa0tx/
2.Reuse existing Table renderer which displays the html as plain text but before returning it to the parent to be appended, move all th text to th html.
Edit: I created a pull request on main repository https://github./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
}
}
);
});