python测试开发django-116.Paginator分页器页数大时显示省略号...

2021-09-14 11:33:11 浏览数 (1)

前言

使用django自带的Paginator分页器集合bootstrap的pagination控件可以实现分页功能, 如果页数较大的时候,希望能显示省略号 当前页,这样看起来更美观一点。

自定义分页功能

自定义一个分页功能,当分页导航栏数量很多时,多的页码显示省略号…,传3个参数

paginator Paginator分页器实例对象

page Page类实例对象,paginator.page(页码数)获取

is_paginated=True 是否需要显示分页导航栏

参考博客https://www.zmrenwu.com/courses/django-blog-tutorial/materials/21/

视图函数

视图函数返回模板所需要的对象

代码语言:javascript复制
# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/
from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage

def teachersViewP(request):
    teachers = Teacher.objects.all()

    paginator = Paginator(teachers, per_page=10)
    page_num = request.GET.get('page', 1)
    try:
        page_num = int(page_num)
    except:
        page_num = 1
    if page_num<1 or page_num>paginator.num_pages:
        page_num = 1
    is_paginated = True
    page_object = paginator.get_page(page_num)
    data = pagination_function(paginator, page_object, is_paginated)
    return render(request, 'teacher.html', locals())

模板实现

模板结合bootstrap框架实现前端分页展示

代码语言:javascript复制
# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 分页的状态</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h3>分页器加载table表格</h3>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>电话</th>
            </tr>
        </thead>
        <tbody>
            {% for field in page_object %}
                <tr>
                    <td>{{ field.name }}</td>
                    <td>{{ field.age }}</td>
                    <td>{{ field.tel }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    {% if is_paginated %}
            <ul class="pagination pull-right">
                {% endif %}

                {#上一页按钮开始#}
                {# 如果当前页有上一页#}
                {% if page_object.has_previous %}
                    {#  当前页的上一页按钮正常使用#}
                    <li class="previous"><a href="?page={{ page_object.previous_page_number }}">上一页</a></li>
                {% else %}
                    {# 当前页的不存在上一页时,上一页的按钮不可用#}
                    <li class="previous disabled"><a href="#">上一页</a></li>
                {% endif %}
                {#上一页按钮结束#}
                {% if data.first %}
                    <li class="page"><a href="?page=1">1</a></li>
                {% endif %}
                {% if data.left %}
                    {% if data.left_has_more %}
                        <li class="page"><a href="javascript:void(0)">...</a></li>
                    {% endif %}
                    {% for i in data.left %}
                        <li class="page"><a href="?page={{ i }}">{{ i }}</a></li>
                    {% endfor %}
                {% endif %}
                <li class="page active" ><a href="javascript:void(0)"> {{ page_num }}</a></li>
                {% if data.right %}
                    {% for i in data.right %}
                        <li class="page"><a href="?page={{ i }}">{{ i }}</a></li>
                    {% endfor %}
                    {% if data.right_has_more %}
                        <li class="page"><a href="javascript:void(0)">...</a></li>
                    {% endif %}
                {% endif %}
                {% if data.last %}
                    <li class="page"><a
                            href="?page={{ paginator.num_pages }}">{{ paginator.num_pages }}</a>
                    </li>

                {% endif %}
                {% if page_object.has_next %}
                    <li class="next"><a href="?page={{ page_object.next_page_number }}">下一页</a></li>
                {% else %}
                    <li class="next disabled"><a href="#">下一页</a></li>
                {% endif %}
                {# 下一页按钮结束#}

            </ul>
</div>

</body>
</html>

实现效果

页码效果展示

中间页码显示省略号

0 人点赞