Paginate logic

paginate.go.html

{{ $page := 10 }}
{{ $count := 20 }}
{{ $url := "/users?page=%v" }}

<ul class="pagination" role="navigation" aria-label="Pagination">
  {{ if gt $page 1 }}
  <li class="pagination-previous"><a href="{{ printf $url 1 }}" aria-label="Previous page"></a></li>
  {{ else }}
  <li class="pagination-previous disabled"></li>
  {{ end }}

  {{ $head := min (minus $page 2) (minus $count 4) }}
  {{ if gt $head 3 }}
    {{ range seq 1 2 }}
    <li><a href="{{ printf $url . }}" aria-label="Page {{ . }}">{{ . }}</a></li>
    {{ end }}
    <li class="ellipsis" aria-hidden="true"></li>
    {{ range seq $head (minus $page $head) }}
    <li><a href="{{ printf $url . }}" aria-label="Page {{ . }}">{{ . }}</a></li>
    {{ end }}
  {{ else }}
    {{ range seq 1 (minus $page 1) }}
    <li><a href="{{ printf $url . }}" aria-label="Page {{ . }}">{{ . }}</a></li>
    {{ end }}
  {{ end }}

  <li class="current"><span class="show-for-sr">You're on page</span> {{ $page }}</li>

  {{ $tail := max 5 (add $page 2) }}
  {{ if gt (minus $count $tail)  3 }}
    {{ range seq (add $page 1) (minus $tail $page) }}
    <li><a href="{{ printf $url . }}" aria-label="Page {{ . }}">{{ . }}</a></li>
    {{ end }}
    <li class="ellipsis" aria-hidden="true"></li>
    {{ range seq (minus $count 1) 2 }}
    <li><a href="{{ printf $url . }}" aria-label="Page {{ . }}">{{ . }}</a></li>
    {{ end }}
  {{ else }}
    {{ range seq (add $page 1) (minus $count $page) }}
    <li><a href="{{ printf $url . }}" aria-label="Page {{ . }}">{{ . }}</a></li>
    {{ end }}
  {{ end }}

  {{ if lt $page $count }}
  <li class="pagination-next"><a href="{{ printf $url $count }}" aria-label="Next page"></a></li>
  {{ else }}
  <li class="pagination-next disabled"></li>
  {{ end }}
</ul>

paginate.html.twig

{# TODO update to js version
p: curernt page
count: page count
url: "%p" for page number placeholder, eg. "/articles/?p=%p"
#}
{% macro paginate(p, count, url) %}
{% set urlParts = options.url | split('%p') %}
{% if count > 1 %}
<ul class="pagination">
  {% if p > 1 %}
  <li><a href="{{ urlParts | join(p - 1) }}" rel="prev">◀</a></li>
  {% else %}
  <li class="disabled"><span>◀</span></li>
  {% endif %}
  
  {% if p - 1 > 5 %}
    {% for i in 1..2 %}
    <li><a href="{{ urlParts | join(i) }}">{{ i }}</a></li>
    {% endfor %}
    <li class="disabled"><span>…</span></li>
    {% for i in (p - 2)..(p - 1) %}
    <li><a href="{{ urlParts | join(i) }}">{{ i }}</a></li>
    {% endfor %}
  {% elseif p > 1 %}
    {% for i in 1..(p - 1) %}
    <li><a href="{{ urlParts | join(i) }}">{{ i }}</a></li>
    {% endfor %}
  {% endif %}

  <li class="active"><span>{{ p }}</span></li>
  
  {% if count - p > 5 %}
    {% for i in (p + 1)..(p + 2) %}
    <li><a href="{{ urlParts | join(i) }}">{{ i }}</a></li>
    {% endfor %}
    <li class="disabled"><span>…</span></li>
    {% for i in (count - 1)..count %}
    <li><a href="{{ urlParts | join(i) }}">{{ i }}</a></li>
    {% endfor %}
  {% elseif p < count %}
    {% for i in (p + 1)..(count) %}
    <li><a href="{{ urlParts | join(i) }}">{{ i }}</a></li>
    {% endfor %}      
  {% endif %}

  {% if p < count %} 
  <li><a href="{{ urlParts | join(p + 1) }}" rel="next">▶</a></li>
  {% else %}
  <li class="disabled"><span>▶</span></li>
  {% endif %}
</ul>
{% endif %}
{% endmacro %}

paginate.js

function paginate(p, c) {
  var out = []
  var head = Math.min(p - 2, c - 4)
  if (head > 3) {
     out.push(1, 2, '...', head, '-', p - 1)
  } else {
     out.push(1, '-', p - 1)
  }
  out.push('*' + p)
  var tail = Math.max(p + 2, 5)
  if (c - tail > 3) {
    out.push(p + 1, '-', tail, '...', c - 1, c)
  } else {
    out.push(p + 1, '-', c)
  }
  return out
}

function testPaginate() {
  for (let i = 0; i < 200; i = i + 17) {
    for (let j = 1; j <= i; j = j + 3) {
      console.log(paginate(j, i).toString())
    }
  }
}