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:
    original JSON: https://api.blockchain.info/charts/transactions-per-second?timespan=5weeks&rollingAverage=8hours&format=json
    locally stored: http://api.json-content-importer.com/extra/json/api.blockchain.info.json

    [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)
1159355080015935508004.45520833333349
2159355260015935526004.3968754504
3159355440015935544004.324479166672280
4159355620015935562004.247916666671874
5159355800015935580004.1171875820
6159355980015935598004.002604166671321
7159356160015935616003.89218752576
8159356340015935634003.756770833331032
9159356520015935652003.63541666667519

Credits: Thank you Lawrence from South Melbourne, Australia