温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Django html 分页

发布时间:2020-08-10 23:43:14 来源:网络 阅读:921 作者:lvnian2009 栏目:开发技术


16.分页

django 自带的分页:django paginator

参考:https://docs.djangoproject.com/en/1.10/topics/pagination/

>>> from django.core.paginator import Paginator
>>> objects = ['john', 'paul', 'george', 'ringo']
>>> p = Paginator(objects, 2)

>>> p.count
4
>>> p.num_pages     ##一共多少页,也可说是最后一页的页数
2
>>> p.page_range
[1, 2]
>>>

>>> page1 = p.page(1)
>>> page1
<Page 1 of 2>
>>> page1.object_list
['john', 'paul']

>>> page2 = p.page(2)
>>> page2.object_list
['george', 'ringo']
>>> page2.has_next()
False
>>> page2.has_previous()
True
>>> page2.has_other_pages()
True
>>> page2.next_page_number()
Traceback (most recent call last):
...
EmptyPage: That page contains no results
>>> page2.previous_page_number()
1
>>> page2.start_index() # The 1-based index of the first item on this page
3
>>> page2.end_index() # The 1-based index of the last item on this page
4
>>> p.page(0)
Traceback (most recent call last):
...
EmptyPage: That page number is less than 1
>>> p.page(3)
Traceback (most recent call last):
...
EmptyPage: That page contains no results

###################################
###################################
###################################  后端处理
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from django.shortcuts import render

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(request, '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 %}    ### ?page ,加上'?'问号。 就是一个get方法。
    </span>
</div>


###################################
###################################
###################################  前端处理,用bootstrap 实现, 作业:线上分页中的前后几页,而不是下面的全部页面都显示

                    <nav>
                      <ul class="pagination">
                      {% if articles.has_previous %}
                        <li>
                            <a href="?page={{ articles.previous_page_number }}" aria-label="Previous">
                                <span aria-hidden="true">
                                    &laquo;
                                </span>
                            </a>
                        </li>
                      {% else %}
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">
                                    &laquo;
                                </span>
                            </a>
                        </li>

                      {% endif %}

                      {% for p_num in articles.paginator.page_range %}
                        {% if articles.number == p_num %}
                        <li class="active">
                            <a href="#">
                                {{ articles.number }}
                                <span class="sr-only">{{ articles.number }}
                                </span>
                            </a>
                        </li>
                        {% else %}
                        <li >
                            <a href="?page={{ p_num }}">
                                {{ p_num }}
                            </a>
                        </li>
                        {% endif %}
                       {% endfor %}
                        {% if articles.has_next %}
                        <li>
                            <a href="?page={{ articles.next_page_number }}" aria-label="Next">
                                <span aria-hidden="true">
                                    &raquo;
                                </span>
                            </a>
                        </li>
                        {% else %}
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">
                                    &raquo;
                                </span>
                            </a>
                        </li>
                      {% endif %}
                      </ul>
                    </nav>



下面这个实例,分页页面按钮数最多显示为3个!

实例:
后端:
def index(request):   ##分页
    articles_list = models.Article.objects.all().order_by('-publish_date')  ###把内容取出来,但不是真正取出去。
    paginator = Paginator(articles_list, 2) # Show 2 contacts per page

    page = request.GET.get('page')     ##前台说要去那一页,就提交到这
    try:
        articles = paginator.page(page)
    except PageNotAnInteger:
        # If page is not an integer, deliver first page.  ##如果页面不是一个整数,交付第一页
        articles = paginator.page(1)
    except EmptyPage:
        # If page is out of range (e.g. 9999), deliver last page of results.
        articles = paginator.page(paginator.num_pages) ##如果取的页数超过最大页数,就返回最后一页

    page_range = range(articles.number - 1 ,articles.number + 2)
    max_page = paginator.num_pages
    return render(request,'index.html',{
        'articles': articles,
        'page_range': page_range,
        'max_page': max_page,
    })

前端:
<div class="pagination">
<ul class="pagination">
    {% if articles.has_previous %}
        <li><a href="?page={{ articles.previous_page_number }}">previous</a>
        </li>
    {% endif %}

    {% for p_num in page_range %}
        {% if 0 < p_num and p_num < max_page %}
            {% if articles.number == p_num %}
                <li class="active">
                <a href="#">
                {{ articles.number }}
                <span class="sr-only">{{ articles.number }}
                </span>
                </a>
                </li>
            {% else %}
                <li >
                <a href="?page={{ p_num }}">
                    {{ p_num }}
                </a>
                </li>
            {% endif %}
        {% endif %}
    {% endfor %}
    
    
    {% if articles.has_next %}
        <li><a href="?page={{ articles.next_page_number }}">next</a></li>
    {% endif %}
</ul>
</div>
<div class="pagination">
<ul class="pagination">
    {% if articles.has_previous %}
        <li><a href="?page={{ articles.previous_page_number }}">&laquo;</a>
        </li>
    {% else %}
        <li class="disabled"><a href="?page={{ articles.next_page_number }}">&laquo;</a></li>
    {% endif %}

    {% for p_num in page_range %}
        {% if 0 < p_num and p_num < max_page %}
            {% if articles.number == p_num %}
                <li class="active">
                <a href="#">
                {{ articles.number }}
                <span class="sr-only">{{ articles.number }}
                </span>
                </a>
                </li>
            {% else %}
                <li >
                <a href="?page={{ p_num }}">
                    {{ p_num }}
                </a>
                </li>
            {% endif %}
        {% endif %}
    {% endfor %}


    {% if articles.has_next %}
        <li><a href="?page={{ articles.next_page_number }}">&raquo;</a></li>
        {% else %}
        <li class="disabled"><a href="?page={{ articles.next_page_number }}">&raquo;</a></li>
    {% endif %}
</ul>
</div>


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI