Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-15T12:48:32.310Z
Answers.LastActivityDate: 2017-04-18T04:29:34.793Z
Answers.LastEditDate: 2017-04-18T04:29:34.793Z
Answers.UserDisplayName: Simon Franzen
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-05-10T00:31:36.430Z
Answers.LastActivityDate: 2019-05-10T00:31:36.430Z
Answers.UserDisplayName: Piotr Pogorzelski
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-11-28T11:56:43.893Z
Answers.Text: Ah. It appears I didn't realise what that did when I saw it. Thanks for that!
Answers.UserDisplayName: hamishtaplin
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-11-28T11:47:16.273Z
Answers.LastActivityDate: 2016-07-17T05:51:47.600Z
Answers.LastEditDate: 2016-07-17T05:51:47.600Z
Answers.UserDisplayName: Lighty_46
Body: <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>
  
Tags: <pagination>
Title: Any examples of numeric pagination?
ThreadText: # 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 %}
      <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
  
  > **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 %}
  <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 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>
  
  
  ---
  
  