<p>Good starting point: <a href="https://craftcms.com/docs/templating/paginate" rel="nofollow noreferrer">https://craftcms.com/docs/templating/paginate</a></p>

<p>If you also want display '...' instead of the whole list of page numbers, you can do something like this:</p>

<pre><code>{% if pageInfo.totalPages &gt; 1 %}
&lt;div class='blogPostList__pagination'&gt;

    {% if pageInfo.prevUrl %}&lt;a href='{{ pageInfo.prevUrl }}' class='blogPostList__pagination__prev'&gt;&amp;lt;&lt;/a&gt;{% endif %}

    {% if pageInfo.currentPage &gt; 2 %}
        &lt;a class='blogPostList__pagination__pageNumber' href='{{ pageInfo.firstUrl }}'&gt;{{ 1 }}&lt;/a&gt;
    {% endif %}

    {% if pageInfo.currentPage &gt; 3 %}
        &lt;span&gt;...&lt;/span&gt;
    {% endif %}

    {% for page, url in pageInfo.getPrevUrls(1) %}
        &lt;a class='blogPostList__pagination__pageNumber' href='{{ url }}'&gt;{{ page }}&lt;/a&gt;
    {% endfor %}

    &lt;span class='blogPostList__pagination__pageNumber pageNumberIsActive'&gt;{{ pageInfo.currentPage }}&lt;/span&gt;

    {% for page, url in pageInfo.getNextUrls(1) %}
        &lt;a class='blogPostList__pagination__pageNumber' href='{{ url }}'&gt;{{ page }}&lt;/a&gt;
    {% endfor %}


    {% if pageInfo.currentPage &lt; pageInfo.totalPages-2 %}
        &lt;span&gt;...&lt;/span&gt;
    {% endif %}

    {% if pageInfo.currentPage &lt; pageInfo.totalPages-1 %}
        &lt;a class='blogPostList__pagination__pageNumber' href='{{ pageInfo.lastUrl }}'&gt;{{ pageInfo.totalPages }}&lt;/a&gt;
    {% endif %}

    {% if pageInfo.nextUrl %}&lt;a href='{{ pageInfo.nextUrl }}' class='blogPostList__pagination__next'&gt;&amp;gt;&lt;/a&gt;{% endif %}

&lt;/div&gt;
{% endif %}
</code></pre>

<p>(PS: We put this part in its own twig file to reuse it on the site)</p>

CC BY-SA 3.0
2017-04-15T12:48:32.310Z
2017-04-18T04:29:34.793Z
2017-04-18T04:29:34.793Z
Simon Franzen
<p>Here's an article on my blog describing how to use ellipsis pagination in your Craft templates:</p>

<p><a href="http://craftsnippets.com/articles/ellipsis-pagination-component-for-craft-cms" rel="nofollow noreferrer">http://craftsnippets.com/articles/ellipsis-pagination-component-for-craft-cms</a></p>

<p>There is also a plugin that can render such pagination:</p>

<p><a href="https://plugins.craftcms.com/pagination" rel="nofollow noreferrer">https://plugins.craftcms.com/pagination</a></p>

CC BY-SA 4.0
2019-05-10T00:31:36.430Z
2019-05-10T00:31:36.430Z
Piotr Pogorzelski
<p>Sure, <a href="http://buildwithcraft.com/docs/templating/paginate" rel="noreferrer">http://buildwithcraft.com/docs/templating/paginate</a></p>

<pre><code>{% paginate craft.entries.section('blog').limit(10) as entries %}
    &lt;a href="{{ paginate.firstUrl }}"&gt;First Page&lt;/a&gt;
    {% if paginate.prevUrl %}&lt;a href="{{ paginate.prevUrl }}"&gt;Previous Page&lt;/a&gt;{% endif %}

    {% for page, url in paginate.getPrevUrls(5) %}
        &lt;a href="{{ url }}"&gt;{{ page }}&lt;/a&gt;
    {% endfor %}

    &lt;span class="current"&gt;{{ paginate.currentPage }}&lt;/span&gt;

    {% for page, url in paginate.getNextUrls(5) %}
        &lt;a href="{{ url }}"&gt;{{ page }}&lt;/a&gt;
    {% endfor %}

    {% if paginate.nextUrl %}&lt;a href="{{ paginate.nextUrl }}"&gt;Next Page&lt;/a&gt;{% endif %}
    &lt;a href="{{ paginate.lastUrl }}"&gt;Last Page&lt;/a&gt;
</code></pre>

<p>This outputs something along the lines of: First Page, Previous Page, (nearby page numbers), Next Page, Last Page </p>

CC BY-SA 3.0
2014-11-28T11:56:43.893Z
Ah. It appears I didn't realise what that did when I saw it. Thanks for that!
hamishtaplin
CC BY-SA 3.0
2014-11-28T11:47:16.273Z
2016-07-17T05:51:47.600Z
2016-07-17T05:51:47.600Z
Lighty_46
<p>I can find examples of prev/next style pagination but none of creating proper numeric-style pagination (eg. how Google do it). </p>

<p>Does anyone have an example I could use?</p>

<pagination>
Any examples of numeric pagination?
# Any examples of numeric pagination?

(Asked by: username_0 on 2014-11-28)

I can find examples of prev/next style pagination but none of creating proper numeric-style pagination (eg. how Google do it).

Does anyone have an example I could use?

**Tags:** pagination


---

## 3 answers

### Answer by username_3 on 2014-11-28. Score: 12 | Accepted answer

Sure, http://buildwithcraft.com/docs/templating/paginate
{% paginate craft.entries.section('blog').limit(10) as entries %}
    First Page
    {% if paginate.prevUrl %}Previous Page{% endif %}

    {% for page, url in paginate.getPrevUrls(5) %}
        {{ page }}
    {% endfor %}

    {{ paginate.currentPage }}

    {% for page, url in paginate.getNextUrls(5) %}
        {{ page }}
    {% endfor %}

    {% if paginate.nextUrl %}Next Page{% endif %}
    Last Page

This outputs something along the lines of: First Page, Previous Page, (nearby page numbers), Next Page, Last Page

> **Comments:**
> **username_0**: Ah. It appears I didn't realise what that did when I saw it. Thanks for that!  

---

### Answer by username_1 on 2017-04-15. Score: 4

Good starting point: https://craftcms.com/docs/templating/paginate
If you also want display '...' instead of the whole list of page numbers, you can do something like this:
{% if pageInfo.totalPages > 1 %}


    {% if pageInfo.prevUrl %}<{% endif %}

    {% if pageInfo.currentPage > 2 %}
        {{ 1 }}
    {% endif %}

    {% if pageInfo.currentPage > 3 %}
        ...
    {% endif %}

    {% for page, url in pageInfo.getPrevUrls(1) %}
        {{ page }}
    {% endfor %}

    {{ pageInfo.currentPage }}

    {% for page, url in pageInfo.getNextUrls(1) %}
        {{ page }}
    {% endfor %}


    {% if pageInfo.currentPage < pageInfo.totalPages-2 %}
        ...
    {% endif %}

    {% if pageInfo.currentPage < pageInfo.totalPages-1 %}
        {{ pageInfo.totalPages }}
    {% endif %}

    {% if pageInfo.nextUrl %}>{% endif %}


{% endif %}

(PS: We put this part in its own twig file to reuse it on the site)


---

### Answer by username_2 on 2019-05-10. Score: 1

Here's an article on my blog describing how to use ellipsis pagination in your Craft templates:

<http://craftsnippets.com/articles/ellipsis-pagination-component-for-craft-cms>

There is also a plugin that can render such pagination:

<https://plugins.craftcms.com/pagination>


---

