How To Create HubsPot Pagination Using HubL - 100% Working

Follow our step-by-step guide to seamlessly implement pagination in HubSpot, ensuring a smooth user experience. This tutorial focuses on HubL, and it’s designed to work flawlessly with your blog listing template.
php


<!-- Pagination HERE--------- -->

<nav class="blog-pagination-container">
{% if not simple_list_page %}

        {% if contents.total_page_count > 0 %}

            {% if widget.range == 10 %}

                {% set base = 10 %}

                {% set loop_ = [‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’,’7′,’8′,’9′,’10’] %}

            {% else %}

                {% set base = 10 %}

                {% set loop_ = [‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’,’7′,’8′,’9′,’10’] %}

            {% endif %}

        {% set current_pg_index = last_page_num + 1 %}

         {% set range_start = ((1 – current_pg_index) % base) + current_pg_index %} 

<div class="-mt-px flex w-0 flex-1 {% if current_page_num == 1 %} previous-number   {% else %} {% endif %}">
         {% if !last_page_num || !first_page_num  %}

				  <a href="{{ blog_page_link(last_page_num) }}" class="previous-page">

					<!-- Heroicon name: mini/arrow-long-left -->

					<svg class="mr-3 h-5 w-5 text-gray-400 prev-number" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
					  
					</svg>

					Previous

				  </a>{% endif %}

<style>
          .previous-number {
            display:none;
            }</style>

</div>
<div class="hidden md:-mt-px md:flex">
         <span class="pg">

            {% set i = range_start %}

            {% for pg in loop_ %} {# effectively, for i=1 to i=base #}

                {% if i <= contents.total_page_count %}
                
                <a href="{{ blog_page_link(i) }}" class="{% if !current_pg_index %}blog-pagination{% endif %} {% if i == current_pg_index %}blog-pagination-active {% endif %}">{{ i }}</a>

                {% set i = i + 1 %}

                {% endif %}

            {% endfor %}

        </span>

          {% if contents.total_page_count > 9 %}

            {% if current_page_num >= 8 %}

                <span class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500">

                 <a href="{% if current_page_num <= 9 %}{{ blog_page_link(1) }}{% else %}{{ blog_page_link(current_page_num - 9) }}{% endif %}">…</a></span>

            {% endif %}

        {% endif %}      

          {% if current_pg_index == contents.total_page_count %}

           {% if contents.total_page_count > 5 %}

				  <span class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500">…</span>

          {% endif %}

        {% endif %}
				</div>
<div class="-mt-px flex w-0 flex-1 justify-end">
          {% if next_page_num %}

				  <a href="{{ blog_page_link(current_page_num + 1) }}" class="next-page">

					Next

					<!-- Heroicon name: mini/arrow-long-right -->

					<svg class="ml-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
					  
					</svg>

				  </a>{% endif %}
				</div>
{% endif %}

 {% endif %}

			  </nav>
How To Create HubsPot Pagination Using HubL – 100% Working
