Any examples of numeric pagination?

Question

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?

Answer 1

Sure, http://buildwithcraft.com/docs/templating/paginate

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

    {% for page, url in paginate.getPrevUrls(5) %}
        <a href="{{ url }}">{{ page }}</a>
    {% endfor %}

    <span class="current">{{ paginate.currentPage }}</span>

    {% for page, url in paginate.getNextUrls(5) %}
        <a href="{{ url }}">{{ page }}</a>
    {% endfor %}

    {% if paginate.nextUrl %}<a href="{{ paginate.nextUrl }}">Next Page</a>{% endif %}
    <a href="{{ paginate.lastUrl }}">Last Page</a>

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

Answer 2

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 %}
<div class='blogPostList__pagination'>

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

    {% if pageInfo.currentPage > 2 %}
        <a class='blogPostList__pagination__pageNumber' href='{{ pageInfo.firstUrl }}'>{{ 1 }}</a>
    {% endif %}

    {% if pageInfo.currentPage > 3 %}
        <span>...</span>
    {% endif %}

    {% for page, url in pageInfo.getPrevUrls(1) %}
        <a class='blogPostList__pagination__pageNumber' href='{{ url }}'>{{ page }}</a>
    {% endfor %}

    <span class='blogPostList__pagination__pageNumber pageNumberIsActive'>{{ pageInfo.currentPage }}</span>

    {% for page, url in pageInfo.getNextUrls(1) %}
        <a class='blogPostList__pagination__pageNumber' href='{{ url }}'>{{ page }}</a>
    {% endfor %}


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

    {% if pageInfo.currentPage < pageInfo.totalPages-1 %}
        <a class='blogPostList__pagination__pageNumber' href='{{ pageInfo.lastUrl }}'>{{ pageInfo.totalPages }}</a>
    {% endif %}

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

</div>
{% endif %}

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

Answer 3

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