Liquid and Arithmetic - pagination

Question

I am working on some pagination and I am wondering if there is a way to tell liquid to only show 5 pages. The output I am looking for is
<< First 5 6 7 8 9 Last >>
The logic I currently have in place works but it is showing all 30 some pages.
{% for count in (2..paginator.total_pages) %}
{% if count == paginator.page %}
<span class="current">{{ count }}</span>
{% else %}
{{ count }}
{% endif %}
{% endfor %}
I would like to be able to make the 2 and paginator.total_pages be dynamic, I have tried
{% for count in ((paginator.page - 2)..(paginator.page + 2)) %}
This code however does not actually do the math, if paginator.page = 5 then the loop is 5..5 and does not provide the expected results. I can figure out the logic so that it does not hit negative numbers and works as expected but how can I do math equations in this?

Answer 1

You need use a filter on paginator.total_pages to do the arithmetic, and then capture the result in a variable using the capture tag. Once you have the start and end pages, you can write the for loop as you normally would:
{% capture page_start %}{{ paginator.page | minus: 2 }}{% endcapture %}
{% capture page_end %}{{ paginator.page | plus: 2 }}{% endcapture %}
{% for count in (page_start..page_end) %}
{% comment %} ... do your thing ... {% endcomment %}
{% endfor %}

Answer 2

I'm building a blog with Jekyll and I've faced a similar situation. According to what I've found in the Liquid wiki is possible to iterate over a subset of a given collection using limit and offset.
The following example reflects your particular case and should work correctly in every page, from the first to the last one:
{% capture start %}{{ paginator.page | minus: 3 }}{% endcapture %}
{% for i in (1..paginator.total_pages) limit: 5 offset: start %}
...
{% endfor %}

Answer 3

I am using Bootstrap 3.0.3 for my website. I use the following code for pagination.
It has the same effect you're looking for. The code I posted above is what you're looking for, but I will post my bootstrap pagination code here anyways.
{% if paginator.total_pages != 1 %}
{% if paginator.total_pages < 7 %}
<div class="page-body col-md-12">
<ul class="pagination pagination-centered">
{% if paginator.total_pages >= 10 %}
{% if paginator.previous_page %}
<li>
««
</li>
{% else %}
<li class="disabled">
<a>««</a>
</li>
{% endif %}
{% endif %}
{% if paginator.previous_page %}
{% if paginator.previous_page == 1 %}
<li>
«
</li>
{% else %}
<li>
«
</li>
{% endif %}
{% else %}
<li class="disabled">
<a>«</a>
</li>
{% endif %}
{% if paginator.page == 1 %}
<li class="active">
<a>1</a>
</li>
{% else %}
<li>
1
</li>
{% endif %}
{% for count in (2..paginator.total_pages) %}
{% if count == paginator.page %}
<li class="active">
<a>{{count}}</a>
</li>
{% else %}
<li>
{{count}}
</li>
{% endif %}
{% endfor %}
{% if paginator.next_page %}
<li>
»
</li>
{% else %}
<li class="disabled">
<a>»</a>
</li>
{% endif %}
{% if paginator.total_pages >= 10 %}
{% if paginator.next_page %}
<li>
»»
</li>
{% else %}
<li class="disabled">
<a>»»</a>
</li>
{% endif %}
{% endif %}
</ul>
</div>
{% else %}
{% assign page_start = paginator.page | minus: 2 %}
{% assign page_end = paginator.page | plus: 2 %}
{% if page_end > paginator.total_pages %}
{% assign page_end = paginator.total_pages %}
{% assign page_start = paginator.page | minus: 4 %}
{% endif %}
{% if page_start < 2 %}
{% assign page_end = paginator.page | plus: 3 %}
{% assign page_start = paginator.page | minus: 1 %}
{% endif %}
{% if page_start == 0 %}
{% assign page_end = paginator.page | plus: 4 %}
{% assign page_start = paginator.page %}
{% endif %}
<div class="page-body col-md-12">
<ul class="pagination pagination-centered">
{% if paginator.total_pages > 5 %}
{% if paginator.previous_page %}
<li>
««
</li>
{% else %}
<li class="disabled">
<a>««</a>
</li>
{% endif %}
{% endif %}
{% if paginator.previous_page %}
{% if paginator.previous_page == 1 %}
<li>
«
</li>
{% else %}
<li>
«
</li>
{% endif %}
{% else %}
<li class="disabled">
«
</li>
{% endif %}
{% if page_start == 1 %}
{% assign page_end = paginator.page | plus: 4 %}
{% assign page_start = 2 %}
{% if paginator.page == 1 %}
<li class="active">
1
</li>
{% else %}
<li>
1
</li>
{% endif %}
{% endif %}
{% for count in (page_start..page_end) %}
{% if count == paginator.page %}
<li class="active">
{{count}}
</li>
{% else %}
<li>
{{count}}
</li>
{% endif %}
{% endfor %}
{% if paginator.next_page %}
<li>
»
</li>
{% else %}
<li class="disabled">
»
</li>
{% endif %}
{% if paginator.total_pages > 5 %}
{% if paginator.next_page %}
<li>
»»
</li>
{% else %}
<li class="disabled">
<a>»»</a>
</li>
{% endif %}
{% endif %}
</ul>
</div>
{% endif %}
{% endif %}

Answer 4

Try this instead
{% if paginator.total_pages < 7 %}
{% if paginator.page == 1 %}
<span class="current bold">1</span>
{% else %}
1
{% endif %}
{% for count in (2..paginator.total_pages) %}
{% if count == paginator.page %}
<span class="current bold">{{ count }}</span>
{% else %}
{{ count }}
{% endif %}
{% endfor %}
{% else %}
{% assign page_start = paginator.page | minus: 2 %}
{% assign page_end = paginator.page | plus: 2 %}
{% if page_end > paginator.total_pages %}
{% assign page_end = paginator.total_pages %}
{% assign page_start = paginator.page | minus: 4 %}
{% endif %}
{% if page_start < 2 %}
{% assign page_end = paginator.page | plus: 3 %}
{% assign page_start = paginator.page | minus: 1 %}
{% endif %}
{% if page_start == 0 %}
{% assign page_end = paginator.page | plus: 4 %}
{% assign page_start = paginator.page %}
{% endif %}
{% if page_start == 1 %}
{% assign page_end = paginator.page | plus: 4 %}
{% assign page_start = 2 %}
{% if paginator.page == 1 %}
<span class="current bold">1</span>
{% else %}
1
{% endif %}
{% endif %}
{% for count in (page_start..page_end) %}
{% if count == paginator.page %}
<span class="current bold">{{ count }}</span>
{% else %}
{{ count }}
{% endif %}
{% endfor %}
{% endif %}