PRO: Pagination
Paginating means to show only a part of the data on one page and offer links like “Page 1 – Page 2 – …” to go to other pages.
There are two situations where pagination comes up:
Output must be paginated
An API-URL sends many JSON-Dataitems, which can’t be displayed on one page. The Dataitems can be displayed in a twig-for-loop. By using a pageno as GET-parameter you can select parts of the loop.
Example:
JSON:
http://api.json-content-importer.com/extra/paginationdata.php
Pagination:
http://api.json-content-importer.com/pro-pagination-example/?no=3
This is done by a JCI-Template:
urlparam4twig: no
URL: http://api.json-content-importer.com/extra/paginationdata.php
twig-template:
{% set noonpage = 20 %}
{% set noofitems = ( days | length ) %}
{% if urlparam.no %}{% set selno = urlparam.no %}{% else %}{% set selno = 1 %}{% endif %}
number of data-items: {{ noofitems }} at <a href="http://api.json-content-importer.com/extra/paginationdata.php" target="_blank">http://api.json-content-importer.com/extra/paginationdata.php</a><br>
{% set noofpages = (noofitems /noonpage) | round(0, 'ceil') %} show on {{noofpages}} pages:
{% set start = noonpage *(selno-1) %}
{% set end= start + noonpage %}
{% for i in 1..noofpages %}
{% if i==selno %}
<b>this is page: </b> {{selno}} ({{start+1}} - {{end}})
{% else %}
<a href=?no={{i}}>{{i}}</a>
{% endif %}
{% endfor %}
<hr>
{% if noofitems ==0 %} No data-items found {% endif %}
<ul>
{% for day in days | slice(start, noonpage) %}
<li>
{% set currno = start + loop.index0+1 %} {{currno}}. {{day.FORENAMES}} {{day.SURNAME}}
</li>
{% endfor %}
</ul>
API-Requests are paginated
The API has a pagination itself. Usually the API-URL has a GET-Parameter like page=1 etc. to show several pages.
Example:
http://api.json-content-importer.com/extra/api/pagination/?page=1
Example:
http://api.json-content-importer.com/pro-pagination-example/
See the twig-template for that in the JCI-Template for the URL and the template itself:
urlparam4twig: no
URL:
{% set page = 0 %}{% if urlparam.no %}{% set page = urlparam.no-1 %}{% endif %}
http://api.json-content-importer.com/extra/api/pagination/?page={{page}}
twig-template:
{% set noonpage = 10 %}
{% set noofpages = (totalno/noonpage) | round(0, 'ceil') %}
no of found dataitems: {{totalno}}, show on {{noofpages}} pages, each with {{noonpage }} items
<br>
{% set page = 1 %}{% if urlparam.no %}{% set page = urlparam.no %}{% endif %}
{% for i in 1..noofpages %}
{% if i==page %}
//<b>this is page: </b> {{page }} //
{% else %}
<a href=?no={{i}}>{{i}}</a>
{% endif %}
{% endfor %}
<hr>
{% set currentpage = 1 %}
{% if urlparam.no %}{% set currentpage = page %}{% endif %}
<br>{% set start = noonpage * (currentpage-1) +1 %}
{% set end = start + noonpage -1 %}
{% if start < 1 %} {% set start = 1 %} {% set end = noonpage %} {% endif %}
{% if end > totalno %} {% set end = totalno %} {% endif %}
show {{start}} to {{end}}
<br>
{% for k,v in items %}
{{k}}: {{v}}<br>
{% endfor %}
In Detail:
Number of Data – Number of Pages
In the best case the JSON got from the API has information on how many Dataitems are there. Even if only a part of the Dataitems are in the rest of the JSON. Let’s say there is a JSON-field “totalno” which has the total numer of items. Then you set the number of items to be shown on one page: “noonpage”. Dividing these two numbers gives us the number of pages. In Twig in a JCI-Templates this is calculated this way:
{% set noonpage = 10 %}
{% set noofpages = (totalno/noonpage) | round(0, 'ceil') %}
no of found dataitems: {{totalno}}, show on {{noofpages}} pages, each with {{noonpage }} items
Links to pages
So we know how many pages we need. Also we set “no” to the current page as URL-Parameter in ther JCI-Template. Looping through all pages gives us a Link-List to all Pages. The href-Link might be set to the needed Pagename:
{% set page = 1 %}{% if urlparam.no %}{% set page = urlparam.no %}{% endif %}
{% for i in 1..noofpages %}
{% if i==page %}
//<b>this is page: </b> {{page }} //
{% else %}
<a href=?no={{i}}>{{i}}</a>
{% endif %}
{% endfor %}
Calc start and end Dataitems on a page
“noonpage” is the fixed number of Dataitems on one page. “no” the current page. Let’s calc the start and end Dataitem in the set of This is ok for all pages, but not for the last one. If we’re on the last page the
{% set currentpage = 1 %}
{% if urlparam.no %}{% set currentpage = page %}{% endif %}
<br>{% set start = noonpage * (currentpage-1) +1 %}
{% set end = start + noonpage -1 %}
{% if start < 1 %} {% set start = 1 %} {% set end = noonpage %} {% endif %}
{% if end > totalno %} {% set end = totalno %} {% endif %}
show {{start}} to {{end}}
Show Data of one page
{% for k,v in items %}
{{k}}: {{v}}<br>
{% endfor %}