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:

Did this answer your question?