自定义分页
分页功能在每个网站都是必要的，对于分页来说，其实就是根据用户的输入计算出应在数据库表中的起始位置。
1、设定煤业显示的数据条数
2、用户输入页码（第一页，第二页...）
3、根据设定的每页显示条数和当前页码，计算出需要取数据表的起始位置
4、在数据表中根据起始位置取值，页面上输出数据
前面那样会在页面中生成所有的页码，但实际需要是设定指定数量的页码，格式如 ［上一页］［1］［2］［3］［4］［5］［下一页］
1、设定每页显示数据条数
2、用户输入页码
3、设定显示多少页号
4、获取当前数据总条数
5、根据设定显示多少页号和数据总条数计算出总页数
6、根据设定的每页显示条数和当前页码数，计算出需要取数据表的起始位置
7、在数据表中根据起始位置取值，页面上输出数据
8、输出分页html，如：［上一页］［1］［2］［3］［4］［5］［下一页］
urls.py
urlpatterns = [
url(r‘page/, views.page),
]
customer.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="{% static ‘imgs/aimp_logo_48px_.ico‘ %}">
{% block title %}
{#下面的是改网页的标题上的图标#}
<title>Template</title>
{% endblock %}
<!-- Bootstrap core CSS -->
<link href="{% static ‘plugin/bootstrap3.7/css/bootstrap.min.css‘ %}" rel="stylesheet">
<!-- font_awesome CSS -->
<link rel="stylesheet" href="{% static ‘plugin/font-awesome-4.7.0/css/font-awesome.min.css‘ %}">
<!-- Custom styles for this template网上模板定义的css样式 -->
<link href="{% static ‘css/dashboard.css‘ %}" rel="stylesheet">
{% block custom_css %}
{#自定义css留白#}
{% endblock %}
</head>
<body>
{#导航组件#}
{% include ‘layout/navbar.html‘ %}
{#内容区#}
<div class="container-fluid">
<div class="row">
{#左侧边栏#}
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="{% url ‘app_crm:customer_list‘ %}">客户信息表 <span
class="sr-only">(current)</span></a></li>
<li><a href="#">销售</a></li>
<li><a href="#">老师</a></li>
<li><a href="#">学生</a></li>
</ul>
</div>
{#右边内容展示区,表单及面板#}
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
{% block content %}
<h2 class="sub-header">客户信息展示表</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>序号</th>
<th>账户</th>
<th>密码</th>
</tr>
</thead>
<tbody>
{% for u in user %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ u.name }}</td>
<td>{{ u.pwd }}</td>
</tr>
{% empty %}
<tr>
<td colspan="3" class="text-center">暂无数据</td>
</tr>
{% endfor %}
</tbody>
</table>
{# 分页 #}
<nav aria-label="Page navigation" class="text-center">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
{% for page in total_page %}
{# 此处也可以设计url为分组的形式传递页码给后台{% url ‘app_crm:base‘ page %}#}
<li><a href="{% url ‘app_crm:base‘ %}?page={{ page }}">{{ page }}</a></li>
{% endfor %}
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
{% endblock %}
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="{% static ‘plugin/jquery-3.3.1/jquery3.3.1.min.js‘ %}"></script>
<script type="text/javascript" src="{% static ‘plugin/bootstrap3.7/js/bootstrap.min.js‘ %}"></script>
{#自定义js留白区域快#}
{% block custom_js %}
{% endblock %}
</body>
</html>
html-前端循环生成页码
views.py
1 def page(request):
2 """
3 all_count: 总数据条数
4 page_num: 每页显示数据条数，自定义
5 total_page: 总页码数
6 more：总数据条数% 每页数 ==》余数
7 current_page: 当前页码，由前端点击时，将页码发回来
8 """
9 user = [{‘name‘: ‘sun%s‘ % i, ‘pwd‘: ‘pwd{}‘.format(i)} for i in range(1, 302)] # 测试数据源
10 all_count = len(user) # 拿到总数据条数
11 page_num = 10 # 定义每页显示的数据条数
12 total_page, more = divmod(all_count, page_num) # 得出商和余数
13 if more: # 如果有余数，表示总页码要多加一个页码,否则就是整除
14 total_page += 1
15
16 try:
17 current_page = int(request.GET.get(‘page‘))
18 if current_page <= 0: # 因为不确定前端传过来的数字的准确性，可能没有或超过，负数所以要判断,一旦报错，就设置当前页为1
19 raise ValueError()
20 except Exception as e:
21 current_page = 1
22
23 # 所有数据和生成的标签页全部展示
24 # 因为计划通过前端for循环产生标签，故需要传一个可迭代的数据即range(1,total_page+1),切片取头不取尾
25 return render(request, ‘layout/base.html‘, {‘user‘: user, ‘total_page‘: range(1, total_page + 1)})
26
27 # 注：前端拿到user和total_page对象，对其for循环生成对应标签即可
分页初版-显示所有数据和标签
1 def page(request):
2 """
3 all_count: 总数据条数
4 page_num: 每页显示数据条数，自定义
5 total_page: 总页码数
6 more：总数据条数% 每页数 ==》余数
7 current_page: 当前页码，由前端点击时，将页码发回来
8 start: 切片开始索引
9 end: 切片结束索引
10 页码数和切片之间的关系：
11 第一页： 1 1 10 0 10 每页10条，切片从0开始，尾不取
12 2 11 20 10 20
13 3 21 30 20 30
14 关系为：（当前页-1）*10 即 start = (current_page-1)*10
15 end= current_page*page_num
16 """
17 user = [{‘name‘: ‘sun%s‘ % i, ‘pwd‘: ‘pwd{}‘.format(i)} for i in range(1, 302)]
18 all_count = len(user)
19 page_num = 10 # 定义每页显示的数据条数
20 total_page, more = divmod(all_count, page_num) # 得出商和余数
21 if more: # 如果有余数，表示总页码要多加一个页码,否则就是整除
22 total_page += 1
23 try:
24 current_page = int(request.GET.get(‘page‘))
25 # 因为不确定前端传过来的数字的准确性，可能没有或超过，负数所以要判断,一旦报错，就设置当前页为1
26 if current_page <= 0:
27 raise ValueError()
28 except Exception as e:
29 current_page = 1
30 # 根据前端传过来的页码，计算给前端发送多少数据，限制数据条数
31 start = (current_page - 1) * 10
32 end = current_page * page_num
33
34 return render(request, ‘layout/base.html‘, {‘user‘: user[start:end], # 限制数据条数，根据需要给
35 ‘total_page‘: range(1, total_page + 1)})
分页过滤版-根据前端需求页码给出对应数量的数据+所有页码标签
def page(request):
"""
all_count: 总数据条数
page_num: 每页显示数据条数，自定义
total_page: 总页码数
more：总数据条数% 每页数 ==》余数
current_page: 当前页码，由前端点击时，将页码发回来
start: 切片开始索引
end: 切片结束索引
页码数和切片之间的关系：
第一页： 1 1 10 0 10 每页10条，切片从0开始，尾不取
2 11 20 10 20
3 21 30 20 30
关系为：（当前页-1）*10 即 start_page = (current_page-1)*10
end_page = current_page*page_num
start_page: 起始页码数
end_page: 终止页码数
max_page_show: 每页最多展示几个分页，如7各分页：1 2 3 当前页 5 6 7
"""
user = [{‘name‘: ‘sun%s‘ % i, ‘pwd‘: ‘pwd{}‘.format(i)} for i in range(1, 302)]
all_count = len(user)
page_num = 10 # 定义每页显示的数据条数
total_page, more = divmod(all_count, page_num) # 得出商和余数
if more: # 如果有余数，表示总页码要多加一个页码,否则就是整除
total_page += 1
# 因为计划通过前端for循环产生标签，故需要传一个可迭代的数据即range(1,total_page+1),切片取头不取尾
try:
current_page = int(request.GET.get(‘page‘))
# 因为不确定前端传过来的数字的准确性，可能没有或超过，负数所以要判断,一旦报错，就设置当前页为1
if current_page <= 0:
raise ValueError()
except Exception as e:
current_page = 1
# 根据前端传过来的页码，计算给前端发送多少数据，限制数据条数
start = (current_page - 1) * 10
end = current_page * page_num
# 定义分页页码起始页码数，终止页码数，每个页面最大显示页码数
max_page_show = 5 # 一般都定义为奇数，让中间的页(即当前页)左右对称
half_page_show = max_page_show // 2
# 将会出现几种情况：
# 1、数据总页码数<= 定义的每个页面最大显示页码数max_page_show，就直接把所有的显示出来即可
if total_page <= max_page_show:
start_page = 1
end_page = total_page
else:
# 2、当前页小于half_page_show时，排除会出现负数的情况，解决左边的问题
if current_page <= half_page_show: # 都要保证每个页面有max_page_show页
start_page = 1
end_page = max_page_show
# 3、当前页+half_page_show > max_page_show 时，会出现没有数据，但会有页码，故需要排除掉
elif current_page + half_page_show > total_page:
start_page = total_page - max_page_show + 1
# start_page = current_page - half_page_show +1
end_page = total_page
else:
start_page = current_page - half_page_show
end_page = current_page + half_page_show
return render(request, ‘layout/base.html‘, {‘user‘: user[start:end],
‘total_page‘: range(start_page, end_page + 1)
}) # 限制页面总显示页码数及根据需求页码给出对应数据
分页进阶版-指定页面最大显示页码数，按需要给出对应条数据
def page(request):
"""
all_count: 总数据条数
page_num: 每页显示数据条数，自定义
total_page: 总页码数
more：总数据条数% 每页数 ==》余数
current_page: 当前页码，由前端点击时，将页码发回来
start: 切片开始索引
end: 切片结束索引
页码数和切片之间的关系：
第一页： 1 1 10 0 10 每页10条，切片从0开始，尾不取
2 11 20 10 20
3 21 30 20 30
关系为：（当前页-1）*10 即 start_page = (current_page-1)*10
end_page = current_page*page_num
start_page: 起始页码数
end_page: 终止页码数
max_page_show: 每个页面最大显示页码数，如7各分页：1 2 3 当前页 5 6 7
"""
user = [{‘name‘: ‘sun%s‘ % i, ‘pwd‘: ‘pwd{}‘.format(i)} for i in range(1, 302)]
all_count = len(user) # 得出数据总条数
page_num = 10 # 定义每页显示的数据条数
total_page, more = divmod(all_count, page_num) # 得出商和余数
if more:
total_page += 1 # 如果有余数，表示总页码要多加一个页码
try:
current_page = int(request.GET.get(‘page‘))
# 因为不确定前端传过来的数字的准确性，可能没有或超过，负数，所以要判断,一旦报错，就设置当前页为1
if current_page <= 0:
raise Exception(‘当前页码数字不符合规范‘)
except Exception as e:
current_page = 1
# 根据前端传过来的页码，计算给前端发送多少数据，限制数据条数
start = (current_page - 1) * 10
end = current_page * page_num
# 定义分页页码起始页码数，终止页码数，每个页面最大显示页码数,实现每页固定页码数
max_page_show = 5 # 一般都定义为奇数，让中间的页(即当前页)左右对称
half_page_show = max_page_show // 2
# 1、数据总页码数<= 定义的每个页面最大显示页码数max_page_show，就直接把所有的显示出来即可
if total_page <= max_page_show:
start_page = 1
end_page = total_page
else:
# 2、当前页小于half_page_show时，排除会出现负数的情况，解决左边的问题
if current_page <= half_page_show: # 都要保证每个页面有max_page_show页
start_page = 1
end_page = max_page_show
# 3、当前页+half_page_show > max_page_show 时，会出现没有数据，但会有页码，故需要排除掉
elif current_page + half_page_show > total_page:
start_page = total_page - max_page_show + 1
# start_page = current_page - half_page_show +1
end_page = total_page
else:
start_page = current_page - half_page_show
end_page = current_page + half_page_show
"""后端实现分页，前端只需接收只需接收字符串即可，故需要把生成得标签拼接起来"""
html_list = []
# 加上"首页"功能，即当前页与第一页相比【首页】【上一页】 1 2 3 4 5 【下一页】【末页】
if current_page <= 1:
first = ‘<li class="disabled"><a>首页</a></li>‘
else:
first = ‘<li><a href="{}?page={}">首页</a></li>‘.format(reverse(‘app_crm:base‘), 1)
html_list.append(first)
# 加上"上一页"功能，即当前页与第一页相比 【首页】【上一页】 1 2 3 4 5 【下一页】【末页】
if current_page <= 1:
prev = ‘<li class="disabled"><a>上一页</a></li>‘ # 当前页小于1时，上一页按钮禁止点击
else:
prev = ‘<li><a href="{}?page={}">上一页</a></li>‘.format(reverse(‘app_crm:base‘), current_page - 1)
html_list.append(prev)
# 生成分页页码标签
for page in range(start_page, end_page + 1):
if page == current_page: # 加active类
li_html = ‘<li class="active"><a href="{0}?page={1}">{1}</a></li>‘.format(reverse(‘app_crm:base‘), page)
else:
li_html = ‘<li><a href="{0}?page={1}">{1}</a></li>‘.format(reverse(‘app_crm:base‘), page)
html_list.append(li_html)
# 加上"下一页"功能，当前页与最后一页比较，即total_page
if current_page >= total_page:
next_page = ‘<li class="disabled"><a>下一页</a></li>‘
else:
next_page = ‘<li><a href="{}?page={}">下一页</a></li>‘.format(reverse(‘app_crm:base‘), current_page + 1)
html_list.append(next_page)
# 加上"末页" 功能
if current_page >= total_page:
last = ‘<li class="disabled"><a>末页</a></li>‘
else:
last = ‘<li><a href="{}?page={}">末页</a></li>‘.format(reverse(‘app_crm:base‘), total_page)
html_list.append(last)
html_str = "".join(html_list) # 拼接成字符串
from django.utils.html import format_html # 后端声明发送的是安全的标签，将字符串编译成标签
result = format_html(html_str)
return render(request, ‘layout/base.html‘, {‘user‘: user[start:end],
‘total_page‘: result
}) # 限制页面总显示页码数及根据需求页码给出对应数据
分页终极版
分页终极版是在后端循环生成分页标签，故前端只需引用即可{{result}} 即可。
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<link rel="icon" href="{% static ‘imgs/aimp_logo_48px_.ico‘ %}">
{% block title %}
<title>Template</title>
{% endblock %}
<!-- Bootstrap core CSS -->
<link href="{% static ‘plugin/bootstrap3.7/css/bootstrap.min.css‘ %}" rel="stylesheet">
<!-- font_awesome CSS -->
<link rel="stylesheet" href="{% static ‘plugin/font-awesome-4.7.0/css/font-awesome.min.css‘ %}">
<!-- Custom styles for this template网上模板定义的css样式 -->
<link href="{% static ‘css/dashboard.css‘ %}" rel="stylesheet">
{% block custom_css %}
{#自定义css留白#}
{% endblock %}
</head>
<body>
{#导航组件#}
{% include ‘layout/navbar.html‘ %}
{#内容区#}
<div class="container-fluid">
<div class="row">
{#左侧边栏#}
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="{% url ‘app_crm:customer_list‘ %}">客户信息表 <span
class="sr-only">(current)</span></a></li>
<li><a href="#">销售</a></li>
<li><a href="#">老师</a></li>
<li><a href="#">学生</a></li>
</ul>
</div>
{#右边内容展示区#}
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
{% block content %}
<h2 class="sub-header">客户信息展示表</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>序号</th>
<th>账户</th>
<th>密码</th>
</tr>
</thead>
<tbody>
{% for u in user %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ u.name }}</td>
<td>{{ u.pwd }}</td>
</tr>
{% empty %}
<tr>
<td colspan="3" class="text-center">暂无数据</td>
</tr>
{% endfor %}
</tbody>
</table>
{# 分页 #}
<nav aria-label="Page navigation" class="text-center">
<ul class="pagination">
{{ total_page }}
</ul>
<form action="">
<span>去第</span>
<label for="search_page"></label>
<input id="search_page" name="page" type="text" >
<span>页</span>
<input type="submit" class=" btn-primary" value="确定">
</form>
</nav>
</div>
{% endblock %}
</div>
</div>
</div>
<script type="text/javascript" src="{% static ‘plugin/jquery-3.3.1/jquery3.3.1.min.js‘ %}"></script>
<script type="text/javascript" src="{% static ‘plugin/bootstrap3.7/js/bootstrap.min.js‘ %}"></script>
{% block custom_js %}
{#自定义js留白区域快#}
{% endblock %}
</body>
</html>
终极html+分页数据+指定数量分页+搜索分页
原文地址：https://www.cnblogs.com/sunxiuwen/p/9750316.html
时间： 2024-11-01 03:49:20