Generate HTML pivot table JS sample
Sample code that illustrates how to generate HTML pivot table with help of PivotData microservice.
HTML
<a href="https://www.nrecosite.com/pivotdata_service.aspx">PivotData microservice</a> web API usage demo
<br/><br/>
<!-- Sample code that renders HTML pivot table with PivotData microservice web API -->
<div id="pivotTablePlaceholder">
</div>
<br/>
<button id="exportToPdf" onclick="$('#exportToPdfForm').submit()">
Export to PDF
</button>
<!-- use form to download export as file -->
<form id="exportToPdfForm" method="POST" action="http://pivotdataservice.nrecosite.com/pivotdataservice/api/cube/7f74de2546804cf9b12da34d7e5af382/pivot/export/pdf" target="_blank">
<input type="hidden" name="pvtReportJson" value="{"Rows": [ {"Name":"Region"} ],"Columns": [ {"Name":"Order Date (Year)"}],"Measures": [ {"Name":"Count"}]}"/>
<input type="hidden" name="__JwtAuthorization" value="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6WyJkZW1vQHNlZWt0YWJsZS5jb20iLCJkZW1vQHNlZWt0YWJsZS5jb20iXSwibmFtZWlkIjpbIjEiLCIxIl0sInVuaXF1ZV9uYW1lIjpbIlNlZWtUYWJsZSBEZW1vIiwiU2Vla1RhYmxlIERlbW8iXSwicmVhZG9ubHkiOlsiVHJ1ZSIsIlRydWUiXSwibmJmIjoxNTM4NTczMTI2LCJleHAiOjE4ODQxNzMxMjYsImlhdCI6MTUzODU3MzEyNiwiaXNzIjoiU1QifQ.LlMWzVC0E0gcLCn6Wb9gw03y4IealqLRKPnCiZm-kr8"/>
</form>
CSS
table {
border-collapse: collapse;
width:100%;
font-family:Arial;
font-size:10px;
margin:0px;
padding:0px;
}
td,th {
border:1px solid silver;padding:2px;
}
td {
text-align:left;
}
th {
text-align:left;
}
JavaScript
var jwt = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6WyJkZW1vQHNlZWt0YWJsZS5jb20iLCJkZW1vQHNlZWt0YWJsZS5jb20iXSwibmFtZWlkIjpbIjEiLCIxIl0sInVuaXF1ZV9uYW1lIjpbIlNlZWtUYWJsZSBEZW1vIiwiU2Vla1RhYmxlIERlbW8iXSwicmVhZG9ubHkiOlsiVHJ1ZSIsIlRydWUiXSwibmJmIjoxNTM4NTczMTI2LCJleHAiOjE4ODQxNzMxMjYsImlhdCI6MTUzODU3MzEyNiwiaXNzIjoiU1QifQ.LlMWzVC0E0gcLCn6Wb9gw03y4IealqLRKPnCiZm-kr8";
$.ajaxSetup({
headers: {'Authorization': "Bearer " + jwt}
});
var reportCfg = {
"Rows": [ {"Name":"Region"} ],
"Columns": [ {"Name":"Order Date (Year)"}],
"Measures": [ {"Name":"Count"}]
};
$.ajax("http://pivotdataservice.nrecosite.com/pivotdataservice/api/cube/7f74de2546804cf9b12da34d7e5af382/pivot/export/html", {
type: "POST",
data: {
"pvtReportJson": JSON.stringify(reportCfg)
}
}).done(function(res) {
$('#pivotTablePlaceholder').html(res);
});