Print

JCI and TableSorter

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

Create a new JCI-Template:

  • URL:
    http://api.json-content-importer.com/extra/json/api.blockchain.info
  • Method: PHP-RAWGET
  • twig-template:
{{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)</th>
</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>

In action:

http://api.json-content-importer.com/jci-plugins-and-other-plugins/sort-data-in-browser-table-sorter-und-jci-plugin/

Was this article helpful?
0 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Next JCI and Elementor
On this page: