3

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?

12

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

  • Ah. It appears I didn't realise what that did when I saw it. Thanks for that! – hamishtaplin Nov 28 '14 at 11:56
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 %}
<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)

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.