一 . 在views.py的pretty_list函数中添加分页代码
def pretty_list(request):
""" 靓号列表 """
# for i in range(300): # 增加号码测试用
# models.PrettyNum.objects.create(mobile="1818888818",price=10,status=1)
data_dict = {} # 装查询结果的字典
search_data = request.GET.get('q', "") # 获取GET提交的关键字
if search_data: # 如果传了关键字
data_dict["mobile__contains"] = search_data # 才能往字典里传这个值
# 1 根据用户要访问的页码计算出起止位置
page = int(request.GET.get('page', 1)) # 2 获取当前页面 默认第一页
page_size = 10 # 每页显示多少数据
start = (page - 1) * page_size # 2 计算开始值
end = page * page_size # 2 结束值
# 2 总页码
queryset = models.PrettyNum.objects.filter(**data_dict).order_by("-level")[start:end] # 没有传就获取所有的值, [start:end]=规定取值范围
# 3 计算有多少条数据
total_count = models.PrettyNum.objects.filter(**data_dict).order_by("-level").count() # 2 计算有多少条数据
# 4 计算总页码
total_page_count, div = divmod(total_count, page_size) # 3 (总数/每页条数)
if div:
total_page_count += 1
# 5 计算出当前页的前5页和后五页
plus = 5
if total_page_count <= 2 * plus + 1: # 数据库数据比较少没达到11页
start_page = 1 # 固定开始值
end_page = total_page_count + 1 # 总页数+1 固定结束值
else: # 数据比较多 > 11
if page <= plus: # 当前页<5(小极值)
start_page = 1
end_page = 2 * plus + 1 + 1 # 总页数+1
else: # 当前页>5(大极值)
if (page + plus) > total_page_count:
start_page = total_page_count - 2 * plus
end_page = total_page_count # 结束的位子等于总页码
else:
start_page = page - plus
end_page = page + plus
# 页码列表
page_str_list = [] # 2 页码地址列表
# 首页
page_str_list.append('<li><a href="?page={}">首页</a></li>'.format(1))
# 上一页
if page < 1:
prev = '<li><a href="?page={}">上一页</a></li>'.format(page - 1)
else:
prev = '<li><a href="?page={}">上一页</a></li>'.format(1)
page_str_list.append(prev)
# 6 会显示全部页码
for i in range(start_page, end_page + 1):
if i == page:
ele = '<li class="active"><a href="?page={}">{}</a> </li>'.format(i, i) # 生成url
else:
ele = '<li><a href="?page={}">{}</a> </li>'.format(i,i) # 2 每次循环相当于生成<li><a href="/pretty/list/?page=2">2</a></li>地址
page_str_list.append(ele) # 2 添加到页码地址列表
# 下一页
if page < total_page_count: # 当前页小于总页数
prev = '<li><a href="?page={}">下一页</a></li>'.format(page + 1)
else:
prev = '<li><a href="?page={}">下一页</a></li>'.format(total_page_count)
page_str_list.append(prev)
# 尾页
page_str_list.append('<li><a href="?page={}">尾页</a></li>'.format(total_page_count))
# 跳转页
seach_string = """
<li>
<!-- 2. 跳转页码 -->
<form style="float: left;margin-left: 1px" method="get">
<input name="page"
style="position:relative;float:left;display: inline-block;width:80px;border-radius:0;"
type="text" class="form-control"placeholder="页码">
<button class="btn btn-default" type="submit">跳转</button>
</form>
</li>
"""
page_str_list.append(seach_string)
page_string = mark_safe("".join(page_str_list)) # 获取页面并转为字符:mark_safe=转为字符
return render(request, 'pretty_list.html',
{"queryset": queryset, "search_date": search_data, "page_string": page_string}) # 返回页面
二. 在preet_list.html文件中添加页码的div
{% extends 'layout.html' %} <!-- 继承模板 -->
{% block content %} <!-- django导入语法 -->
<div class="container">
<div style="margin-bottom: 10px" class="clearfix">
<a class="btn btn-success" href="/pretty/add/">
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
新建靓号
</a>
<div style="float: right;width: 300px;"> <!-- 搜索框宽300,右飘 -->
<form method="get"> <!-- 表单提交 -->
<div class="input-group"> <!-- name属性="q" -->
<input type="text" name="q" class="form-control" placeholder="Search for..."
value="{{ search_data }}"> <!-- 把后端获取的值再传入前端以get方式提交 -->
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span> <!-- 加个图标 -->
</button>
</span>
</div>
</form>
</div>
</div>
<div class="panel panel-default">
<!-- 面板内容 -->
<div class="panel-heading">
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
靓号列表
</div>
<!-- Table -->
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>号码</th>
<th>价格</th>
<th>级别</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for obj in queryset %}
<tr>
<th>{{ obj.id }}</th>
<td>{{ obj.mobile }}</td>
<td>{{ obj.price }}</td>
<td>{{ obj.get_level_display }}</td>
<td>{{ obj.get_status_display }}</td>
<td>
<a class="btn btn-primary btn-xs" href="/pretty/{{ obj.id }}/edit/">编辑</a>
<a class="btn btn-danger btn-xs" href="/pretty/{{ obj.id }}/delete/">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="clearfix"> <!-- 2. 页码由后台决定 -->
<ul class="pagination">
{{ page_string }}
</ul>
</div>
{# <nav aria-label="..."> <!-- 1. 固定页码只有5页 -->#}
{# <ul class="pagination">#}
{# {{ page_string }}#}
{# <li><a href="/pretty/list/?page=1">1</a></li> <!-- 构建url地址 -->#}
{# <li><a href="/pretty/list/?page=2">2</a></li>#}
{# <li><a href="/pretty/list/?page=3">3</a></li>#}
{# <li><a href="/pretty/list/?page=4">4</a></li>#}
{# <li><a href="/pretty/list/?page=5">5</a></li>#}
{# </ul>#}
{# </nav>#}
</div>
{% endblock %} <!-- 模板结束 -->
三. 效果图
![](https://img-blog.csdnimg.cn/direct/3878801c983945de8e2295ce76989453.png)