Table of contents
(3) Cycle add page number button
(5) Upgrade again, calculate the number of data bars and pages
(6) Re-upgrade, limit the number of page buttons
(7) Upgrade again, add jump function
1. Implement paging function
(1) Insert test data
Create 100 new pieces of data into the list function for pagination testing.
def pretty_list(request):
"""靓号列表"""
for i in range(100):
models.PrettyNum.objects.create(mobile="12332112311",price=10,level=1,status=1)
Note: Comment or delete immediately after running it once, otherwise it will be added every time you visit the list page.
Then implement pagination
#分页功能
#根据用户访问页码计算起始位置
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]Full code:
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})
The following can be accessed by passing the page parameter through the url
(2) Make page number buttons
Enter the bootstrap official website, copy and paste a paging component code
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 %}
Manually add links to achieve pagination
<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) Cycle add page number button
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>page
(4) Make improvements
views.py import code
#后端代码安全标记到前端
from django.utils.safestring import mark_safe page_string = mark_safe("".join(page_str_list))visit page
(5) Upgrade again, calculate the number of data bars and pages
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) Re-upgrade, limit the number of page buttons
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) Upgrade again, add jump function
{% 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 %}
page:
(8) Complete code:
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})
page
