- Your task:
Display JSON-data in the browser in a table which is sortable by the user. - Solution:
Install JCI-Plugin and the plugin “Table Sorter“ - Example-Code:
[jsoncontentimporterpro url=https://api.blockchain.info/charts/transactions-per-second?timespan=5weeks&rollingAverage=8hours&format=json method=rawget parser=twig]
{{description}}
<table id=”myTable” class=”tablesorter”>
<thead><tr>
<th>no (sortable)</th>
<th class=”sortless”>x</th>
<th>x (sortable)</th>
<th>y (sortable)</th>
<th>randomno (sortable) </tr></thead>
<tbody>
{%for v in values %}
{% if loop.index<10 %}
<tr><td>{{loop.index}}</td><td>{{v.x}}</td><td>{{v.x}}</td><td>{{v.y}}</td><td>
{{ random(5000) }} </td></tr>
{% endif %}
{% endfor %}
</tbody></table>
[/jsoncontentimporterpro]
In action:
The number of Bitcoin transactions added to the mempool per second.
| no (sortable) | x | x (sortable) | y (sortable) | randomno (sortable) |
|---|---|---|---|---|
| 1 | 1534877340 | 1534877340 | 3.02854166667 | 3029 |
| 2 | 1534879380 | 1534879380 | 3.03065972222 | 2830 |
| 3 | 1534881420 | 1534881420 | 3.04527777778 | 2504 |
| 4 | 1534883460 | 1534883460 | 3.02493055556 | 278 |
| 5 | 1534885500 | 1534885500 | 3.01072916667 | 4137 |
| 6 | 1534887540 | 1534887540 | 2.95826388889 | 949 |
| 7 | 1534889580 | 1534889580 | 2.90392361111 | 1273 |
| 8 | 1534891620 | 1534891620 | 2.83524305556 | 2451 |
| 9 | 1534893660 | 1534893660 | 2.75642361111 | 2407 |
Credits: Thank you Lawrence from South Melbourne, Australia