目录
1、实现分页功能
(1)插入测试数据
向列表函数中新建100条数据用于分页测试。
def pretty_list(request):
"""靓号列表"""
for i in range(100):
models.PrettyNum.objects.create(mobile="12332112311",price=10,level=1,status=1)
注意:运行一次便立即注释或删掉,否则每次访问列表页面都会新增。
然后实现分页
#分页功能
#根据用户访问页码计算起始位置
page = int(request.GET.get("page",1))
page_size=10
start = (page - 1) * page_size
end = page * page_size
qureyset = models.PrettyNum.objects.filter(**data_dict).order_by("-level")[start:end]
完整代码:
def pretty_list(request):
"""靓号列表"""
# for i in range(100):
# models.PrettyNum.objects.create(mobile="12332112311",price=10,level=1,status=1)
#搜索字典
data_dict={}
value = request.GET.get("q","")
if value:
data_dict["mobile__contains"]=value
#获取的列表按等级降序排列
#select * from 表 order by level desc;
#qureyset = models.PrettyNum.objects.all().order_by("-level")
#分页功能
#根据用户访问页码计算起始位置
page = int(request.GET.get("page",1))
page_size=10
start = (page - 1) * page_size
end = page * page_size
qureyset = models.PrettyNum.objects.filter(**data_dict).order_by("-level")[start:end]
return render(request, "pretty_list.html", {"qureyset": qureyset,"value":value})
下面就可以通过url传递page参数进行访问了
(2)制作页码按钮
进入bootstrap官网,复制粘贴一段分页组件代码
pretty_list.html
{% extends 'template.html' %}
{% block title_content %}
靓号列表
{% endblock %}
{% block content %}
<div class="container">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
靓号列表
</div>
<!-- Table -->
<table class="table table-bordered">
<thead>
<th>ID</th>
<th>号码</th>
<th>价格</th>
<th>级别</th>
<th>状态</th>
<th>操作</th>
</thead>
<tbody>
{% for qurey in qureyset %}
<tr>
<th>{
{ qurey.id }}</th>
<td>{
{ qurey.mobile }}</td>
<td>{
{ qurey.price }}</td>
<td>{
{ qurey.get_level_display }}</td>
<td>{
{ qurey.get_status_display }}</td>
<td>
<a class="btn btn-primary btn-xs" href="/pretty/{
{ qurey.id }}/edit">编辑</a>
<a class="btn btn-danger btn-xs" href="/pretty/delete/?nid={
{ qurey.id }}">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!--分页组件-->
<div>
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</div>
</div>
{% endblock %}
手动添加链接实现分页
<div>
<ul class="pagination">
<li><a href="/pretty/list/?page=1">1</a></li>
<li><a href="/pretty/list/?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
</ul>
</div>
(3) 循环添加页码按钮
views.py
#生成页码代码
"""
<li><a href="?page=1">1</a></li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
……
"""
page_str_list = []
for i in range(1,20):
ele = '<li><a href="?page={}">{}</a></li>'.format(i,i)
page_str_list.append(ele)
page_string = "".join(page_str_list)
return render(request, "pretty_list.html", {"qureyset": qureyset,"value":value,"page_string":page_string})
pretty_list.html
<!--分页组件-->
<div>
<ul class="pagination">
{
{ page_string }}
</ul>
</div>
页面
(4) 进行改进
views.py导入代码
#后端代码安全标记到前端
from django.utils.safestring import mark_safe
page_string = mark_safe("".join(page_str_list))
访问页面
(5)再度升级,计算数据条数和页数
def pretty_list(request):
"""靓号列表"""
# for i in range(100):
# models.PrettyNum.objects.create(mobile="12332112311",price=10,level=1,status=1)
#搜索字典
data_dict={}
value = request.GET.get("q","")
if value:
data_dict["mobile__contains"]=value
#获取的列表按等级降序排列
#select * from 表 order by level desc;
#qureyset = models.PrettyNum.objects.all().order_by("-level")
#分页功能
#根据用户访问页码计算起始位置
page = int(request.GET.get("page",1))
page_size=10
start = (page - 1) * page_size
end = page * page_size
qureyset = models.PrettyNum.objects.filter(**data_dict).order_by("-level")[start:end]
#生成页码代码
"""
<li><a href="?page=1">1</a></li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
……
"""
#获取数据库中的数据条数
total_count = models.PrettyNum.objects.filter(**data_dict).order_by("-level").count()
#总页数
total_page_count,div = divmod(total_count,page_size)#divmod除法函数,返回值:商,余数
if div:
total_page_count += 1
page_str_list = []
for i in range(1,total_page_count+1):#range前取后不取,所以还要加一
ele = '<li><a href="?page={}">{}</a></li>'.format(i,i)
page_str_list.append(ele)
page_string = mark_safe("".join(page_str_list))
return render(request, "pretty_list.html", {"qureyset": qureyset,"value":value,"page_string":page_string})
(6)再升级,限制页码按钮个数
def pretty_list(request):
"""靓号列表"""
# for i in range(100):
# models.PrettyNum.objects.create(mobile="12332112311",price=10,level=1,status=1)
# 搜索字典
data_dict = {}
value = request.GET.get("q", "")
if value:
data_dict["mobile__contains"] = value
# 获取的列表按等级降序排列
# select * from 表 order by level desc;
# qureyset = models.PrettyNum.objects.all().order_by("-level")
# 分页功能
# 根据用户访问页码计算起始位置
page = int(request.GET.get("page", 1))
page_size = 10
start = (page - 1) * page_size
end = page * page_size
qureyset = models.PrettyNum.objects.filter(**data_dict).order_by("-level")[start:end]
# 生成页码代码
"""
<li><a href="?page=1">1</a></li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
……
"""
# 获取数据库中的数据条数
total_count = models.PrettyNum.objects.filter(**data_dict).order_by("-level").count()
# 总页数
total_page_count, div = divmod(total_count, page_size) # divmod除法函数,返回值:商,余数
if div:
total_page_count += 1
# 设置按钮显示范围
plus = 5
if total_page_count <= 2 * plus + 1:
start_page = 1
end_page = total_page_coun + 1
else:
# 当前页小于5
if page <= plus:
start_page = 1
end_page = 2 * plus + 1
else:
if page >= total_page_count:
start_page = total_page_count - 2*plus
end_page = total_page_count + 1
else:
start_page = page - plus
end_page = page + plus + 1
if end_page>=total_page_count+1:
end_page=total_page_count+1
# 页码
page_str_list = []
for i in range(start_page, end_page): # range前取后不取,所以还要加一
if i == page: # 当前页显示按钮样式
ele = '<li class="active"><a href="?page={}">{}</a></li>'.format(i, i)
else:
ele = '<li><a href="?page={}">{}</a></li>'.format(i, i)
page_str_list.append(ele)
page_string = mark_safe("".join(page_str_list))
return render(request, "pretty_list.html", {"qureyset": qureyset, "value": value, "page_string": page_string})
(7) 再升级,添加跳转功能
{% extends 'template.html' %}
{% block title_content %}
靓号列表
{% endblock %}
{% block content %}
<div class="container">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
靓号列表
</div>
<!-- Table -->
<table class="table table-bordered">
<thead>
<th>ID</th>
<th>号码</th>
<th>价格</th>
<th>级别</th>
<th>状态</th>
<th>操作</th>
</thead>
<tbody>
{% for qurey in qureyset %}
<tr>
<th>{
{ qurey.id }}</th>
<td>{
{ qurey.mobile }}</td>
<td>{
{ qurey.price }}</td>
<td>{
{ qurey.get_level_display }}</td>
<td>{
{ qurey.get_status_display }}</td>
<td>
<a class="btn btn-primary btn-xs" href="/pretty/{
{ qurey.id }}/edit">编辑</a>
<a class="btn btn-danger btn-xs" href="/pretty/delete/?nid={
{ qurey.id }}">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!--分页组件-->
<div>
<ul class="pagination">
{
{ page_string }}
</ul>
</div>
<!--输入框组件-->
<form method="get">
<div class="input-group">
<input style="height: 32px" name="page" type="text" placeholder="请输入要跳转的页码">
<span style="width: 100px">
<button class="btn btn-default,left" type="submit">跳转</button>
</span>
</div>
</form>
</div>
{% endblock %}
页面:
(8)完整代码:
pretty_list.html
{% extends 'template.html' %}
{% block title_content %}
靓号列表
{% endblock %}
{% block content %}
<div class="container">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
靓号列表
</div>
<!-- Table -->
<table class="table table-bordered">
<thead>
<th>ID</th>
<th>号码</th>
<th>价格</th>
<th>级别</th>
<th>状态</th>
<th>操作</th>
</thead>
<tbody>
{% for qurey in qureyset %}
<tr>
<th>{
{ qurey.id }}</th>
<td>{
{ qurey.mobile }}</td>
<td>{
{ qurey.price }}</td>
<td>{
{ qurey.get_level_display }}</td>
<td>{
{ qurey.get_status_display }}</td>
<td>
<a class="btn btn-primary btn-xs" href="/pretty/{
{ qurey.id }}/edit">编辑</a>
<a class="btn btn-danger btn-xs" href="/pretty/delete/?nid={
{ qurey.id }}">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!--分页组件-->
<div class="clearfix">
<ul class="pagination" style="float: left">
{
{ page_string }}
<li>
<!--输入框组件-->
<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 style="border-radius: 0" class="btn btn-default" type="submit">跳转</button>
</form>
</li>
</ul>
</div>
</div>
{% endblock %}
views.py
def pretty_list(request):
"""靓号列表"""
# for i in range(100):
# models.PrettyNum.objects.create(mobile="12332112311",price=10,level=1,status=1)
# 搜索字典
data_dict = {}
value = request.GET.get("q", "")
if value:
data_dict["mobile__contains"] = value
# 获取的列表按等级降序排列
# select * from 表 order by level desc;
# qureyset = models.PrettyNum.objects.all().order_by("-level")
# 分页功能
# 根据用户访问页码计算起始位置
page = int(request.GET.get("page", 1))
page_size = 10
start = (page - 1) * page_size
end = page * page_size
qureyset = models.PrettyNum.objects.filter(**data_dict).order_by("-level")[start:end]
# 生成页码代码
"""
<li><a href="?page=1">1</a></li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
……
"""
# 获取数据库中的数据条数
total_count = models.PrettyNum.objects.filter(**data_dict).order_by("-level").count()
# 总页数
total_page_count, div = divmod(total_count, page_size) # divmod除法函数,返回值:商,余数
if div:
total_page_count += 1
# 设置按钮显示范围
plus = 5
if total_page_count <= 2 * plus + 1:
start_page = 1
end_page = total_page_coun + 1
else:
# 当前页小于5
if page <= plus:
start_page = 1
end_page = 2 * plus + 1
else:
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 + 1
# 页码列表
page_str_list = []
#首页
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)
# 页码
for i in range(start_page, end_page): # range前取后不取,所以还要加一
if i == page: # 当前页显示按钮样式
ele = '<li class="active"><a href="?page={}">{}</a></li>'.format(i, i)
else:
ele = '<li><a href="?page={}">{}</a></li>'.format(i, i)
page_str_list.append(ele)
# 下一页
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))
page_string = mark_safe("".join(page_str_list))
return render(request, "pretty_list.html", {"qureyset": qureyset, "value": value, "page_string": page_string})
页面