JSFiddle - React, Tailwind, and code Playground
by Eric
HTML
<link rel="stylesheet" href="https://s3.amazonaws.com/dynatable-docs-assets/css/jquery.dynatable.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="https://s3.amazonaws.com/dynatable-docs-assets/js/jquery.dynatable.js"></script>
<table class="table table-striped" id="remote">
<thead>
<th>Hit_num</th>
<th>Hit_id</th>
<th>Hit_accession</th>
<th>Hsp_evalue</th>
</thead>
<tbody></tbody>
</table>
<script id="blast">
[{
"Hit_num": "1",
"Hit_id": "gi|495426285|ref|WP_008150982.1|",
"Hit_accession": "WP_008150982",
"Hit_hsps": {
"Hsp": {
"Hsp_num": "1",
"Hsp_bit-score": "202.986",
"Hsp_score": "515",
"Hsp_evalue": "1.7033e-61"
}
}
}, {
"Hit_num": "2",
"Hit_id": "gi|495936315|ref|WP_008660894.1|",
"Hit_accession": "WP_008660894",
"Hit_hsps": {
"Hsp": {
"Hsp_num": "1",
"Hsp_bit-score": "196.052",
"Hsp_score": "497",
"Hsp_evalue": "8.4357e-59"
}
}
}, {
"Hit_num": "3",
"Hit_id": "gi|495936314|ref|WP_008660893.1|",
"Hit_accession": "WP_008660893",
"Hit_hsps": {
"Hsp": {
"Hsp_num": "1",
"Hsp_bit-score": "185.652",
"Hsp_score": "470",
"Hsp_evalue": "6.08306e-55"
}
}
}]
</script>
JavaScript
$(document).ready(function () {
$.dynatableSetup({
table: {
defaultColumnIdStyle: 'trimDash' //Make it accept _ spaced headers
}
});
$('#remote').dynatable({
dataset: {
records: JSON.parse($('#blast').text()) //Parse
}
});
});