zoukankan      html  css  js  c++  java
  • django-pure-pagination 组件使用

    django-pure-pagination 组件

    用于在 django 中自动创建分页

    官方详见 github : 这里

    安装

    pip install django-pure-pagination

    配置

    settings.py

    加入 apps 中 需要加入到 apps 中

    INSTALLED_APPS = (
        ...
        'pure_pagination',
    )

    使用

    views.py

    Paginator 实例的时候需要传入 参数

    实例对象 每页显示数量 request 

    ps:

      官方的文档中中未写明. 所以会报错缺少参数

      因此这里要稍微注意

    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 }} 可以自动帮你生成分页. 但是样式没法改的

    如果想使用自己的样式分页则需要另一种方式

    {# 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>

    具体实现效果

  • 相关阅读:
    [Javascript] What is JavaScript Function Currying?
    [Javascript] Array methods in depth
    [ES6] ... spread operator
    [AngularJS] New in Angular 1.5 ng-animate-swap
    [Reduc] React Counter Example
    [Redux] Implementing Store from Scratch
    [Redux] Store Methods: getState(), dispatch(), and subscribe()
    [Redux] Introduction
    [Javascript] Intro to Recursion
    未来-区块链-Micron:区块链永远不会忘记:内存对这项革命性技术的推动作用
  • 原文地址:https://www.cnblogs.com/shijieli/p/10550215.html
Copyright © 2011-2022 走看看