前言
使用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>
实现效果
页码效果展示
中间页码显示省略号