码迷,mamicode.com
首页 > 其他好文 > 详细

django(18)、分页组件开发

时间:2018-08-10 19:41:05      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:cal   load   empty   str   过多   strip   meta   tin   charset   

目录

原生Paginator

urls.py

from django.conf.urls import include, url
from app01 import views as app01_views

urlpatterns = [
    url(r'^index/$', app01_views.index),
]

views.py

from django.core.paginator import EmptyPage, PageNotAnInteger, Paginator
from django.shortcuts import render
from .models import Publisher


def index(request):
    publishers = Publisher.objects.all()
    paginator = Paginator(publishers, 2)  # 每页三条数据
    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(request, 'index.html', locals())

index.html

<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
</head>
<body>

<div class="container">
    <h2>机构列表</h2>
    <div class="row">
        <table class="table table-striped">
            <tr>
                <td>机构名称</td>
                <td>机构地址</td>
            </tr>
            {% for p in contacts.object_list %}
            <tr>
                <td>{{ p.title }}</td>
                <td>{{ p.address }}</td>
            </tr>
            {% endfor %}
        </table>

        <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>
    </div>
</div>
</body>
</html>

页面展示

技术分享图片


利用bootstrap改进Paginator

参考:https://v3.bootcss.com/components/#pagination-default

index.html

<!DOCTYPE html>
<html lang="en">
{% load static %}
{% load my_tag %}
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
</head>
<body>

<div class="container">
    <h2>机构列表</h2>
    <div class="row">
        <table class="table table-striped">
            <tr>
                <td>机构名称</td>
                <td>机构地址</td>
            </tr>
            {% for p in contacts.object_list %}
            <tr>
                <td>{{ p.title }}</td>
                <td>{{ p.address }}</td>
            </tr>
            {% endfor %}
        </table>

        <nav aria-label="Page navigation">
          <ul class="pagination">
            <li>
                {% if contacts.has_previous %}
                    <a href="?page={{ contacts.previous_page_number }}">上一页</a>
                {% endif %}
            </li>

            {% pager_list contacts %}

            <li>
                {% if contacts.has_next %}
                    <a href="?page={{ contacts.next_page_number }}">下一页</a>
                {% endif %}
            </li>
          </ul>
        </nav>

    </div>
</div>
</body>
</html>

my_tag.py

from django.template import Library
from django.utils.safestring import mark_safe

register = Library()

@register.simple_tag
def pager_list(contacts):
    pager_str = ''
    for i in range(contacts.paginator.num_pages):
        active = ''

        # 若为当前页面页码,则高亮显示
        if contacts.number == i + 1:
            active = 'active'

        li_str = '<li class=%s><a href="?page=%s">%s</a></li>'                  % (active, i + 1, i + 1)

        pager_str += li_str
    return mark_safe(pager_str)

改进后显示

技术分享图片

弊端

当数据很大,页码数量过多,那么一次性就不能将页码都显示出来。


Pure_Pagination

安装模块:

  • 源码下载:https://github.com/jamespacileo/django-pure-pagination
  • 利用pip安装下载后的zip文件。

setting.py

INSTALLED_APPS = (
    'pure_pagination',
)

PAGINATION_SETTINGS = {
    'PAGE_RANGE_DISPLAYED': 3,
    'MARGIN_PAGES_DISPLAYED': 2,
    'SHOW_FIRST_PAGE_WHEN_INVALID': True,
}

PAGE_RANGE_DISPLAYED is the number of pages neighbouring the current page which will be displayed (default is 10)

MARGIN_PAGES_DISPLAYED is the number of pages neighbouring the first and last page which will be displayed (default is 2)

技术分享图片

views.py

from django.shortcuts import render
from .models import Publisher
from pure_pagination import Paginator, EmptyPage, PageNotAnInteger


def index(request):
    publishers = Publisher.objects.all()

    try:
        # 获取页码数
        page = request.GET.get('page', 1)
    except PageNotAnInteger:
        page = 1

    p = Paginator(publishers, request=request, per_page=1)
    contacts = p.page(page)

    return render(request, 'index.html', locals())

index.html

方式1:没有任何样式

{{ contacts.render }}

方式2:

<!DOCTYPE html>
<html lang="en">
{% load static %}
{% load my_tag %}
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
</head>
<body>

<div class="container">
    <h2>机构列表</h2>
    <div class="row">
        <table class="table table-striped">
            <tr>
                <td>机构名称</td>
                <td>机构地址</td>
            </tr>
            {% for p in contacts.object_list %}
            <tr>
                <td>{{ p.title }}</td>
                <td>{{ p.address }}</td>
            </tr>
            {% endfor %}
        </table>

    {% load i18n %}
    <nav >
        <ul class="pagination{% if size %} pagination-{{ size }}{% endif %}">
            {% if contacts.has_previous %}
                <li class="previous">
                    <!--此处携带当前页的过滤字段参数,-->
                    <a href="?{{ contacts.previous_page_number.querystring }}"
                       aria-label="{% trans 'previous page' %}">
                        <span aria-hidden="true">上一页</span>
                        {% if verbose %}<span class="hidden-xs">{% trans 'previous page' %}</span>{% endif %}
                    </a>
                </li>
            {% else %}
                <li class="previous disabled">
                    <span>
                        <span aria-hidden="true">上一页</span>
                        {% if verbose %}<span class="hidden-xs">{% trans 'previous page' %}</span>{% endif %}
                    </span>
                </li>
            {% endif %}

            {% for page in contacts.pages %}
                {% if page %}
                    {% if page == contacts.number %}
                        <li class="active">
                            <a href="?{{ page.querystring }}">{{ page }} <span
                                    class="sr-only">({% trans 'current page' %})</span></a>
                        </li>
                    {% else %}
                        <li>
                            <a href="?{{ page.querystring }}">{{ page }}</a>
                        </li>
                    {% endif %}
                {% else %}
                    <li class="disabled">
                        <span>...</span>
                    </li>
                {% endif %}
            {% endfor %}

            {% if contacts.has_next %}
                <li class="next">
                    <a href="?{{ contacts.next_page_number.querystring }}" aria-label="{% trans 'next page' %}">
                        {% if verbose %}<span class="hidden-xs">{% trans 'next page' %}</span>{% endif %}
                        <span aria-hidden="true">下一页</span>
                    </a>
                </li>
            {% else %}
                <li class="next disabled">
                    <span>
                        {% if verbose %}<span class="hidden-xs">{% trans 'next page' %}</span>{% endif %}
                        <span aria-hidden="true">下一页</span>
                    </span>
                </li>
            {% endif %}
        </ul>
    </nav>

    </div>
</div>
</body>
</html>

5、最终效果展示

技术分享图片

django(18)、分页组件开发

标签:cal   load   empty   str   过多   strip   meta   tin   charset   

原文地址:https://www.cnblogs.com/fqh202/p/9456602.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!