django-pure-pagination 組件使用

django-pure-pagination 組件

用於在 django 中自動建立分頁html

官方詳見 github : 這裏前端

安裝

pip install django-pure-pagination

配置

settings.py

加入 apps 中 須要加入到 apps 中git

INSTALLED_APPS = (
    ...
    'pure_pagination',
)

使用

views.py

Paginator 實例的時候須要傳入 參數github

實例對象 每頁顯示數量 request django

ps:app

  官方的文檔中中未寫明. 因此會報錯缺乏參數ide

  所以這裏要稍微注意spa

from django.shortcuts import render_to_response

from pure_pagination import Paginator, EmptyPage, PageNotAnInteger


def index(request):

    try:
        page = request.GET.get('page', 1)
    except PageNotAnInteger:
        page = 1

    objects = ['john', 'edward', 'josh', 'frank']

    # Provide Paginator with the request object for complete querystring generation
  p = Paginator(all_orgs, 5, request=request)
  people = p.page(page) 

  return render_to_response('index.html', { 'people': people, })

index.html

直接經過 {{ people.render }} 能夠自動幫你生成分頁. 可是樣式無法改的code

若是想使用本身的樣式分頁則須要另外一種方式htm

{# index.html #}
{% extends 'base.html' %}

{% block content %}

{% for person in people.object_list %}
    <div>
        First name: {{ person }}
    </div>
{% endfor %}

{# The following renders the pagination html #}
<div id="pagination">
    {{ people.render }}
</div>

{% endblock %}

 

這裏是官方提供的自定義的方法,較爲清晰

{% load i18n %}
<div class="pagination">
    {% if page_obj.has_previous %}
        <a href="?{{ page_obj.previous_page_number.querystring }}" class="prev">&lsaquo;&lsaquo; {% trans "previous" %}</a>
    {% else %}
        <span class="disabled prev">&lsaquo;&lsaquo; {% trans "previous" %}</span>
    {% endif %}
    {% for page in page_obj.pages %}
        {% if page %}
            {% ifequal page page_obj.number %}
                <span class="current page">{{ page }}</span>
            {% else %}
                <a href="?{{ page.querystring }}" class="page">{{ page }}</a>
            {% endifequal %}
        {% else %}
            ...
        {% endif %}
    {% endfor %}
    {% if page_obj.has_next %}
        <a href="?{{ page_obj.next_page_number.querystring }}" class="next">{% trans "next" %} &rsaquo;&rsaquo;</a>
    {% else %}
        <span class="disabled next">{% trans "next" %} &rsaquo;&rsaquo;</span>
    {% endif %}
</div>

實例

views.py

將要分頁的對象建立分頁對象傳遞給前端

        try:
            page = request.GET.get('page', 1)
        except PageNotAnInteger:
            page = 1
        p = Paginator(all_orgs, 5, request=request)
        orgs = p.page(page)
        return render(request, "org-list.html", {
            "all_orgs": orgs,
        })

org-list.html

前端對 分頁數據進行渲染成分頁器

具體怎麼用參考如下

<div class="pageturn">
    <ul class="pagelist">
        {% if all_orgs.has_previous %}
            <li class="long"><a href="?{{ all_orgs.previous_page_number.querystring }}">上一頁</a></li>
        {% endif %}
        {% for page in all_orgs.pages %}
            {% if page %}
                {% ifequal page all_orgs.number %}
                    <li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li>
                {% else %}
                    <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
                {% endifequal %}
            {% else %}
                <li class="none"><a href="">...</a></li>
            {% endif %}
        {% endfor %}
        {% if all_orgs.has_next %}
            <li class="long"><a href="?{{ all_orgs.next_page_number.querystring }}">下一頁</a></li>
        {% endif %}
    </ul>
</div>

具體實現效果

相關文章
相關標籤/搜索