Sort data in Browser: Table Sorter and JCI-Plugin

  • 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