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

前言

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

自定义分页功能

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

  • paginator Paginator分页器实例对象

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

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

    def pagination_function(paginator, page, is_paginated=True):
    if not is_paginated:
    # 如果没有分页，则无需显示分页导航条，不用任何分页导航条的数据，因此返回一个空的字典
    return {}

    # 当前页左边连续的页码号，初始值为空
    left = []

    # 当前页右边连续的页码号，初始值为空
    right = []

    # 标示第 1 页页码后是否需要显示省略号
    left_has_more = False

    # 标示最后一页页码前是否需要显示省略号
    right_has_more = False

    # 标示是否需要显示第 1 页的页码号。
    # 因为如果当前页左边的连续页码号中已经含有第 1 页的页码号，此时就无需再显示第 1 页的页码号，
    # 其它情况下第一页的页码是始终需要显示的。
    # 初始值为 False
    first = False

    # 标示是否需要显示最后一页的页码号。
    # 需要此指示变量的理由和上面相同。
    last = False

    # 获得用户当前请求的页码号
    page_number = page.number

    # 获得分页后的总页数
    total_pages = paginator.num_pages

    # 获得整个分页页码列表，比如分了四页，那么就是 [1, 2, 3, 4]
    page_range = paginator.page_range

    if page_number == 1:
    # 如果用户请求的是第一页的数据，那么当前页左边的不需要数据，因此 left=[]（已默认为空）。
    # 此时只要获取当前页右边的连续页码号，
    # 比如分页页码列表是 [1, 2, 3, 4]，那么获取的就是 right = [2, 3]。
    # 注意这里只获取了当前页码后连续两个页码，你可以更改这个数字以获取更多页码。
    right = page_range[page_number:page_number + 2]

    # 如果最右边的页码号比最后一页的页码号减去 1 还要小，
    # 说明最右边的页码号和最后一页的页码号之间还有其它页码，因此需要显示省略号，通过 right_has_more 来指示。
    if right[-1] < total_pages - 1:
    right_has_more = True

    # 如果最右边的页码号比最后一页的页码号小，说明当前页右边的连续页码号中不包含最后一页的页码
    # 所以需要显示最后一页的页码号，通过 last 来指示
    if right[-1] < total_pages:
    last = True

    elif page_number == total_pages:
    # 如果用户请求的是最后一页的数据，那么当前页右边就不需要数据，因此 right=[]（已默认为空），
    # 此时只要获取当前页左边的连续页码号。
    # 比如分页页码列表是 [1, 2, 3, 4]，那么获取的就是 left = [2, 3]
    # 这里只获取了当前页码后连续两个页码，你可以更改这个数字以获取更多页码。
    left = page_range[(page_number - 3) if (page_number - 3) > 0 else 0:page_number - 1]

    # 如果最左边的页码号比第 2 页页码号还大，
    # 说明最左边的页码号和第 1 页的页码号之间还有其它页码，因此需要显示省略号，通过 left_has_more 来指示。
    if left[0] > 2:
    left_has_more = True

    # 如果最左边的页码号比第 1 页的页码号大，说明当前页左边的连续页码号中不包含第一页的页码，
    # 所以需要显示第一页的页码号，通过 first 来指示
    if left[0] > 1:
    first = True
    else:
    # 用户请求的既不是最后一页，也不是第 1 页，则需要获取当前页左右两边的连续页码号，
    # 这里只获取了当前页码前后连续两个页码，你可以更改这个数字以获取更多页码。
    left = page_range[(page_number - 3) if (page_number - 3) > 0 else 0:page_number - 1]
    right = page_range[page_number:page_number + 2]

    # 是否需要显示最后一页和最后一页前的省略号
    if right[-1] < total_pages - 1:
    right_has_more = True
    if right[-1] < total_pages:
    last = True

    # 是否需要显示第 1 页和第 1 页后的省略号
    if left[0] > 2:
    left_has_more = True
    if left[0] > 1:
    first = True

    data = {
    'left': left,
    'right': right,
    'left_has_more': left_has_more,
    'right_has_more': right_has_more,
    'first': first,
    'last': last,
    }

    return data

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

视图函数

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

# 作者-上海悠悠 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框架实现前端分页展示

# 作者-上海悠悠 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)

相关推荐