Login

Django-pagination with Bootstrap CSS

Author:
ronbeltran
Posted:
May 3, 2012
Language:
Python
Version:
1.4
Tags:
django-pagination bootsrap-css
Score:
4 (after 4 ratings)

A quick django-pagination template fix to make it work with Bootstrap CSS Library 2.0. Usage: Install django-pagination and save the snippet in templates/pagination/pagination.html then {% paginate %} will work fine. See Django-paginaation on Bootstrap CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{% if is_paginated %}
{% load i18n %}
<div class="pagination">
    <ul>
    {% if page_obj.has_previous %}
        <li><a href="?page={{ page_obj.previous_page_number }}{{ getvars }}{{ hashtag }}" class="prev">&lsaquo;&lsaquo; {% trans "previous" %}</a></li>
    {% else %}
        <li class="disabled prev"><a href="#">&lsaquo;&lsaquo; {% trans "previous" %}</a></li>
    {% endif %}
    {% for page in pages %}
        {% if page %}
            {% ifequal page page_obj.number %}
                <li class="current page active"><a href="#">{{ page }}</a></li>
            {% else %}
                <li><a href="?page={{ page }}{{ getvars }}{{ hashtag }}" class="page">{{ page }}</a></li>
            {% endifequal %}
        {% else %}
            ...
        {% endif %}
    {% endfor %}
    {% if page_obj.has_next %}
        <li><a href="?page={{ page_obj.next_page_number }}{{ getvars }}{{ hashtag }}" class="next">{% trans "next" %} &rsaquo;&rsaquo;</a></li>
    {% else %}
        <li class="disabled next"><a href="#">{% trans "next" %} &rsaquo;&rsaquo;</a></li>
    {% endif %}
    </ul>
</div>
{% endif %}

More like this

  1. Django Twitter Bootstrap 3 pagination by Ragnar_Lodbrok 1 year, 5 months ago
  2. Custom Form Example: Forms for Bootstrap Html - CSS Toolkit by fatiherikli 3 years, 6 months ago
  3. Pretty Paginator Tag by sbaechler 3 years, 4 months ago
  4. Something like list_detail generic view but returns PDF document instead by aurelije 6 years, 10 months ago
  5. cron/console bootstrap django by nstrite 7 years, 10 months ago

Comments

Please login first before commenting.