This article will teach you how to build your own pagination tools, using custom HTML, Liquid and Javascript.
- Create the following variables
Input variables:
- page (as number)
Variables:
- page_number (as number expression) :
ifnil(var:page, 1) - per_page (as number, show this amount of objects per page) :
10 - window (as number, amount of pages) :
5 - mid_range (as number expression) :
floor(var:window/2) - relations (as collection, this is the (limited) collection which you want to paginate)
-> limit: use expression :var:per_page
-> offset: use expression : (var:page_number * var:per_page) - var:per_page - total_pages (as number expression) :
ceil(count_full_collection(var:relations) / var:per_page) - next_page (as number expression) :
(var:page_number >= var:total_pages ? var:page_number : (var:page_number + 1)) - previous_page (as number expression) :
(var:page_number == 1 ? 1 : (var:page_number - 1)) - range_start (as number expression) :
((var:page_number - var:mid_range) < 1) ? 1 : ((var:page_number + var:mid_range) > var:total_pages ? ((var:total_pages - var:window + 1)<1 ? 1 : (var:total_pages - var:window + 1)) : var:page_number - var:mid_range) - range_end (as number expression) :
((var:page_number + var:mid_range) > var:total_pages) ? var:total_pages : ((var:page_number - var:mid_range) < 1 ? (var:total_pages < var:window ? var:total_pages : var:window) : (var:page_number + var:mid_range))
2. Create a partial
<nav aria-label="Page navigation" class="pull-right">
<ul class="pagination">
<li{% if page_number == previous_page %} class="disabled"{% endif %}>
{% if page_number != previous_page %}<a href="?page=1{% if params %}&{{params}}{% endif %}" aria-label="Previous">{% endif %}
<span aria-hidden="true">«</span>
{% if page_number != previous_page %}</a>{% endif %}
</li>
<li{% if page_number == previous_page %} class="disabled"{% endif %}>
{% if page_number != previous_page %}<a href="?page={{ previous_page }}{% if params %}&{{params}}{% endif %}" aria-label="Previous">{% endif %}
<span aria-hidden="true">‹</span>
{% if page_number != previous_page %}</a>{% endif %}
</li>
{% for i in (range_start..range_end) %}
<li {% if page_number == i %} class="active"{% endif %}><a href="?page={{ i }}{% if params %}&{{params}}{% endif %}">{{ i }}</a></li>
{% endfor %}
<li{% if page_number == next_page %} class="disabled"{% endif %}>
{% if page_number != next_page %}<a href="?page={{ next_page }}{% if params %}&{{params}}{% endif %}" aria-label="Next">{% endif %}
<span aria-hidden="true">›</span>
{% if page_number != next_page %}</a>{% endif %}
</li>
<li{% if page_number == total_pages %} class="disabled"{% endif %}>
{% if page_number != next_page %}<a href="?page={{ total_pages }}{% if params %}&{{params}}{% endif %}" aria-label="Next">{% endif %}
<span aria-hidden="true">»</span>
{% if page_number != next_page %}</a>{% endif %}
</li>
</ul>
</nav>
3. Include this partial on the pages where you want pagination
{% include 'shared/pagination' %}
Warning: this uses offset pagination, this can be a performance hit on your application when using large collections (http://mysql.rjweb.org/doc.php/pagination)
Example:
