Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Expand pagination beyond previous, current, and next page (Django)

I'm using Pagination in my Django project and it all works properly, but I don't know how to expand my reach beyond +/- one page of the one I'm on. Currently, my html looks as such:

    <div class="pagination pagination-centered">
 <ul>
{% if title.has_previous %}
   <li><a href="?q={{ query }}&page={{ title.previous_page_number }}">«</a></li>
   <li><a href="?q={{ query }}&page={{ title.previous_page_number }}">{{ title.previous_page_number }}</a></li>
{% endif %}
   <li class="active"><a href="?q={{ query }}&page={{ title.number }}">{{ title.number }}</a></li>
{% if title.has_next %}
  <li><a href="?q={{ query }}&page={{ title.next_page_number }}">{{ title.next_page_number }}</a></li>
  <li><a href="?q={{ query }}&page={{ title.next_page_number }}">»</a></li>
{% endif %}
 </ul>
</div>

This results in something that looks like [<<, 1, 2, 3, >>] if you are on page two. I'd like to expand the reach by maybe one or two steps or so. So if I'm on page 3, I can reach all the way from 1-5.

like image 810
Xonal Avatar asked Jun 20 '13 21:06

Xonal


1 Answers

{# Create A Button Group that contains possible pages to navigate to #}

{% for page in paginator.page_range %}
    {% if page < toolbar_max and page > toolbar_min and page != results.number %}
        <button formaction="{% url 'volume:page' page=page %}">{{ page }}</button>
    {% elif page == results.number %}
        <button type="submit" formaction="{% url 'volumes:page' page=page %}">{{ page }}</button>
    {% endif %}
{% endfor %}

Basically, you keep the minimum and maximum number page you want (toolbar_min and toolbar_max and pass that to your page.

# Variables to be passed for page menu
toolbar_max = results.number + 4
toolbar_min = results.number -4

So it will display 4 on each side of the number you are currently on. The 'results' is a query of mine that displays the current page I am on. I wanted that page to be highlighted with a different css class, and for it to know that it should be counting off of variable.

like image 179
JcKelley Avatar answered Sep 20 '22 22:09

JcKelley