JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://raw.github.com/documentcloud/underscore/master/underscore.js"></script>
<script id="query-tabular-output-template" type="text/x-handlebars-template">
{{#if id}}
{{#each_with_index sets}}
<div class="set" id="set_{{index}}">
{{#if this.RESULTS.DATA.length}}
<table class="results table table-bordered table-striped">
<tr>
{{#each this.RESULTS.COLUMNS}}
<th>{{this}}</th>
{{/each}}
</tr>
{{#each this.RESULTS.DATA}}
<tr>
{{#each this}}
<td>{{result_display this this}}</td>
{{/each}}
</tr>
{{/each}}
</table>
{{/if}}
<hr>
</div>
{{/each_with_index}}
{{/if}}
</script>
<div id="outputWrapper"></div>
CSS
td,th {
padding: 5px;
}
th {
font-weight: bold;
}
JavaScript
$(function () {
var compiledOutputTemplate = Handlebars.compile($("#query-tabular-output-template").html());
$.getJSON("http://sqlfiddle.com/index.cfm/fiddles/loadContent",
{fragment: "!2/a2581/1"}, // enter your SQL Fiddle identifier here
function (data) {
$("#outputWrapper").html(
compiledOutputTemplate(data)
);
});
});
Handlebars.registerHelper("each_with_index", function(array, fn) {
var buffer = "";
k=0;
for (var i = 0, j = array.length; i < j; i++) {
if (array[i])
{
var item = array[i];
// stick an index property onto the item, starting with 0
item.index = k;
item.first = (k == 0);
item.last = (k == array.length);
// show the inside of the block
buffer += fn(item);
k++;
}
}
// return the finished buffer
return buffer;
});
Handlebars.registerHelper("result_display", function(value) {
// thanks to John Gruber for this regexp http://daringfireball.net/2010/07/improved_regex_for_matching_urls
// also to "Searls" for his port to JS https://gist.github.com/1033143
var urlRegexp = /\b((?:https?:\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?ÇÈÒÓÔÕ]))/ig;
if ($.isPlainObject(value))
return JSON.stringify(value);
else if (value == null)
return "(null)";
else if (value === false)
return "false";
else if (typeof value === "string" && value.match(urlRegexp) && Handlebars.Utils.escapeExpression(value) == value)
return new Handlebars.SafeString(value.replace(urlRegexp, "<a href='$1'...