How can I create pagination using custom build HTML/Javascript pages?

This article will teach you how to build your own pagination tools, using custom HTML, Liquid and Javascript.

1. 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: