【Django】教程-1-安装+创建项目+目录结构介绍
【Django】教程-2-前端-目录结构介绍
【Django】教程-3-数据库相关介绍
【Django】教程-4-一个增删改查的Demo
【Django】教程-5-ModelForm增删改查+规则校验【正则+钩子函数】
【Django】教程-6-搜索框-条件查询前后端
13. 分页
使用django自带分页，以下 分页方式，支持多数场景。
也支持带条件框分页场景
python
# 用户列表
def user_list(req):
"""用户展示"""
# select * from userinfo order by name asc; -name 倒序
# user_list = UserInfo.objects.all().order_by("-name")
data_dict = {}
query_name = req.GET.get("query_name", "") # 第二个值是默认值, 也可以写if判断
if query_name:
data_dict["name__contains"] = query_name
user_list = UserInfo.objects.filter(**data_dict).order_by("-name")
# 创建 Paginator 对象，每页显示 10 条记录
paginator = Paginator(user_list, 10)
# 获取当前页码，默认为第 1 页
page_number = req.GET.get('page')
# 获取当前页的数据
page_obj = paginator.get_page(page_number)
return render(req, 'user/user_list.html', {"search_data": query_name,'page_obj': page_obj})
html
{% extends 'layout.html' %}
{% block content %}
<div class="container">
<div style="float: right;width: 300px;">
<form method="get">
<div class="input-group">
<input type="text" class="form-control" placeholder="搜索" name="query_name"
value="{{ search_data }}"/>
<span class="input-group-btn">
<button class="btn btn-default" type="submit">查询</button>
</span>
</div>
</form>
</div>
<div style="margin-bottom: 10px">
<a class="btn btn-success" href="/user/add">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
新建用户</a>
</div>
<div style="margin-bottom: 10px">
<a class="btn btn-success" href="/user/modelform/add">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
ModelForm新建用户</a>
</div>
<div class="panel panel-default">
<div class="panel-heading"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>用户列表
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>部门</th>
<th>创建时间</th>
<th>性别</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for i in page_obj %}
<tr>
<td>{{ i.id }}</td>
<td>{{ i.name }}</td>
<td class="password-cell">{{ i.password }}</td>
<td>{{ i.age }}</td>
<td>
{% if i.depart %}
{{ i.depart.title }}
{% endif %}
</td>
<td>{{ i.create_time|date:"Y-m-d H:i:s" }}</td>
<td>{{ i.get_gender_display }}</td>
<td>{{ i.get_status_display }}</td>
<td>
<a class="btn btn-primary btn-xs" href="/user/update/{{ i.id }}">编辑</a>
<a class="btn btn-primary btn-xs" href="/user/modelform/edit/{{ i.id }}">MF编辑</a>
<a class="btn btn-danger btn-xs" href="/user/del?nid={{ i.id }}">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- 分页导航 -->
<nav aria-label="分页">
<ul class="pagination justify-content-center" style="display: flex; flex-wrap: nowrap; align-items: center;">
<!-- 首页 -->
{% if page_obj.has_previous %}
<li class="page-item">
<a class="page-link" href="?page=1">首页</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">首页</span>
</li>
{% endif %}
<!-- 上一页 -->
{% if page_obj.has_previous %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.previous_page_number }}">上一页</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">上一页</span>
</li>
{% endif %}
<!-- 下拉选择页码 -->
<li class="page-item" style="margin: 0 5px;">
<select class="form-control" onchange="goToPage(this.value)">
{% for page_num in page_obj.paginator.page_range %}
<option value="{{ page_num }}" {% if page_num == page_obj.number %}selected{% endif %}>
第 {{ page_num }} 页
</option>
{% endfor %}
</select>
</li>
<!-- 显示当前页码和总页数 -->
<li class="page-item disabled" aria-current="page" style="margin: 0 5px;">
<span class="page-link">共 {{ page_obj.paginator.num_pages }} 页</span>
</li>
<!-- 下一页 -->
{% if page_obj.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.next_page_number }}">下一页</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">下一页</span>
</li>
{% endif %}
<!-- 尾页 -->
{% if page_obj.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">尾页</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">尾页</span>
</li>
{% endif %}
</ul>
</nav>
</div>
<script>
const passwordCells = document.querySelectorAll('.password-cell');
passwordCells.forEach(cell => {
const password = cell.textContent;
const maskedPassword = '*'.repeat(password.length);
cell.textContent = maskedPassword;
});
function goToPage(page) {
const searchParams = new URLSearchParams(window.location.search);
searchParams.set('page', page);
const newUrl = window.location.pathname + '?' + searchParams.toString();
window.location.href = newUrl;
}
</script>
{% endblock %}效果图：
