7

这是来自文档 Django 的示例：

def listing(request):
    contact_list = Contacts.objects.all()
    paginator = Paginator(contact_list, 25) # Show 25 contacts per page

    page = request.GET.get('page')
    try:
        contacts = paginator.page(page)
    except PageNotAnInteger:
        # If page is not an integer, deliver first page.
        contacts = paginator.page(1)
    except EmptyPage:
        # If page is out of range (e.g. 9999), deliver last page of results.
        contacts = paginator.page(paginator.num_pages)

    return render_to_response('list.html', {"contacts": contacts})

模板：

{% for contact in contacts %}
    {# Each "contact" is a Contact model object. #}
    {{ contact.full_name|upper }}<br />
    ...
{% endfor %}

<div class="pagination">
    <span class="step-links">
        {% if contacts.has_previous %}
            <a href="?page={{ contacts.previous_page_number }}">previous</a>
        {% endif %}

        <span class="current">
            Page {{ contacts.number }} of {{ contacts.paginator.num_pages }}.
        </span>

        {% if contacts.has_next %}
            <a href="?page={{ contacts.next_page_number }}">next</a>
        {% endif %}
    </span>
</div>

此显示例如：

第 2 页，共 3 页。下一个

如何以这种方式显示：

previous  1 <b>2</b> 3 Next

带有 html<b>标记的当前页面。

?

4

4 回答 4

21

你可以试试这个：

{% for num in contacts.paginator.page_range %}
  {% ifequal num contacts.number %}
    <span class="current"><b>{{ num }}</b></span>
  {% else %}
    <a href="?page={{ num }}"> {{ num }}</a>
  {% endifequal %} 
{% endfor %}
于 2013-07-05T14:21:37.150 回答
20

下面的示例实际上是基于类的视图，但可以正常工作。CSS 是 Twitter Bootstrap V3.0.0。

{% if is_paginated %}
  <ul class="pagination">
    {% if page_obj.has_previous %}
      <li><a href="?page={{ page_obj.previous_page_number }}">&laquo;</a></li>
    {% else %}
      <li class="disabled"><a href="#">&laquo;</a></li>
    {% endif %}

    {% for num in page_obj.paginator.page_range %}
      {% ifequal num page_obj.number %}
        <li class="active"><a href="#">{{ num }}<span class="sr-only">(current)</span></a></li>
      {% else %}
        <li><a href="?page={{ num }}">{{ num }}</a></li>
      {% endifequal %}
    {% endfor %}

    {% if page_obj.has_next %}
      <li><a href="?page={{ page_obj.next_page_number }}">&raquo;</a></li>
    {% else %}
      <li class="disabled"><a href="#">&raquo;</a></li>
    {% endif %}
  </ul>
{% endif %}
于 2013-09-29T18:58:22.953 回答
5

如果有人需要 Bootstap 4 Alpha 5 版本的代码。

我也做了两个改变：

  1. 我不喜欢重复的页面，所以我将我的情况/profiles/?page=1改为 simple /profiles/。
  2. 我有很多页面，所以我没有显示所有页面。我只显示：第一页、最后一页、当前页和当前页的 +-3 页，以及每 10 页。

如果您只需要 Bootstrap 4 的所有页面而不需要我的修改，只需删除不必要的代码部分（所有内容都已注释）。

{% if is_paginated %}
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <!-- << PREVIOUS PART -->
            <!-- << Disable 'Previous' page button if you are at the 1st page -->
            {% if not page_obj.has_previous %}
                <li class="page-item disabled">
                    <a class="page-link" href="#" tabindex="-1" aria-label="Previous">

            <!-- << If you are at the 2nd page,
            'Previous' page button will get '/profiles/' url instead of '/profiles/?page=1' -->
            {% elif page_obj.previous_page_number == 1 %}
                <li class="page-item">
                    <a class="page-link" href="{{ profiles_1st_page_url }}" aria-label="Previous">

            {% else %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
            {% endif %}

                        <span aria-hidden="true">&laquo;</span>
                        <span class="sr-only">Previous</span>
                    </a>
                </li>

            <!-- PAGES PART -->
            {% for num in page_obj.paginator.page_range %}
                <!-- Active page -->
                {% if num == page_obj.number %}
                    <li class="page-item active">
                        <a class="page-link" href="#">{{ num }}<span class="sr-only">(current)</span></a>
                    </li>

                {% else %}
                    <li class="page-item">
                        <!-- For the 1st page we do not use ?page=1 -->
                        {% if num == 1 %}
                            <a class="page-link" href="{{ profiles_1st_page_url }}">{{ num }}</a>

                        {% else %}
                            <!-- Show current page and +-3 pages -->
                            {% if num|add:"-3" <= page_obj.number and page_obj.number <= num|add:"3" %}
                                <a class="page-link" href="?page={{ num }}">{{ num }}</a>

                            <!-- Shows every 10th page and the last page -->
                            {% elif num|divisibleby:"10" or num == page_obj.paginator.num_pages %}
                                <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                            {% endif %}

                        {% endif %}
                    </li>
                {% endif %}

            {% endfor %}

            <!-- >> NEXT PART -->
            {% if not page_obj.has_next %}
                <!-- << Disable 'Next' page button if you are at the last page -->
                <li class="page-item disabled">
                    <a class="page-link" href="#" tabindex="-1" aria-label="Next">

            {% else %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
            {% endif %}

                        <span aria-hidden="true">&raquo;</span>
                        <span class="sr-only">Next</span>
                    </a>
                </li>

        </ul>
    </nav>
{% endif %}

它看起来像： 在此处输入图像描述

于 2016-10-26T16:21:29.173 回答
5

这是我的。

{% if page.paginator.num_pages > 1 %}
<nav aria-label="Page navigation">
    <ul class="pagination justify-content-center">
        {% if page.paginator.num_pages != 1 %}
            <li class="page-item"><a class="page-link" href="?page=1">First</a></li>
        {% else %}
            <li class="page-item disabled"><a class="page-link" href="#">First</a></li>
        {% endif %}
        {% if page.has_previous %}
            <li class="page-item"><a class="page-link" href="?page={{ page.previous_page_number }}">&laquo;</a></li>
        {% else %}
            <li class="page-item disabled"><a class="page-link" href="#">&laquo;</a></li>
        {% endif %}
        {% for i in page.paginator.page_range %}
            {% if page.number == i %}
                <li class="page-item active"><a class="page-link" href="#">{{ i }} <span class="sr-only">(current)</span></a></li>
            {% elif page.number > i|add:"-5" and page.number < i|add:"+5"%}
                <li class="page-item"><a class="page-link" href="?page={{ i }}">{{ i }}</a></li>
            {% endif %}
        {% endfor %}
        {% if page.has_next %}
            <li class="page-item"><a class="page-link" href="?page={{ page.next_page_number }}">&raquo;</a></li>
        {% else %}
            <li class="page-item disabled"><a class="page-link" href="#">&raquo;</a></li>
        {% endif %}
        {% if page.paginator.num_pages != page.number %}
            <li class="page-item"><a class="page-link" href="?page={{ page.paginator.num_pages }}">Last</a></li>
        {% else %}
            <li class="page-item disabled"><a class="page-link" href="#">Last</a></li>
        {% endif %}
    </ul>
</nav>
{% endif %}

好像 在此处输入图像描述

于 2020-01-01T13:04:08.780 回答